開發者賬號配置
申請一個Apple開發者賬號
進入 developer.apple.com/account/#/w… 點選底部 “立即建立你的 Apple 賬戶”
開發者賬號配置
在web端接入Apple登入前，需要進行相關資訊的配置。具體配置可以參照 配置的流程，或者 Apple的開發者文件
配置生成後，我們會得到一系列的配置資訊和檔案
兩個ID
App ID & Services ID
兩個檔案
apple-developer-domain-association.txt
作為賬號配置過程中驗證的作用；
放在專案的根目錄，透過
https://域名/.well-known/apple-developer-domain-association.txt可訪問其中內容；完成後點選 Apple開發者賬號配置過程中的驗證按鈕，驗證透過後可進行正常的開發除錯，後續可以刪除此檔案。
一個以
.p8結尾的文字檔案，裡面是生成的金鑰，用作生成JWT，作為請求Token時的引數之一
流程說明
常規登入流程
獲取 client_id，註冊一個前端的 redirect_uri
呼叫登入時，跳轉到 Apple 頁面去授權
使用者授權成功後，url 中帶著 code 和其他的引數重定向回到前端頁面
前端頁面獲取 code & idToken，呼叫服務端的 API並傳遞引數 code 和 jwt 解析後 idToken 得到 sub
服務端獲取 code & sub 向 Apple 伺服器互動
Apple實際登入流程
獲取 client_id，註冊一個服務端的 redirect_uri
呼叫登入時，跳轉到 Apple 頁面去授權
使用者授權成功後，Apple 用表單提交 code和其他引數 到重定向 url
服務端獲取 code和其他引數，透過302跳轉到前端頁面
前端頁面獲取 code & idToken，呼叫服務端的 API 並傳遞引數 code 和 jwt 解析後 idToken 得到 sub
服務端獲取 code & sub 向 Apple 伺服器互動
流程圖
接入登入流程
前端選用 Sign in with Apple JS 的方式接入Apple的登入
嵌入使用 Apple JS 登入
在您的網頁中包含指令碼標籤並連結到 Apple 託管的使用 Apple 登入 JS 框架的版本：
<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
配置授權物件
透過在標頭部分設定元標記
<head> <meta name="appleid-signin-client-id" content="[CLIENT_ID]"> <meta name="appleid-signin-scope" content="[SCOPES]"> <meta name="appleid-signin-redirect-uri" content="[REDIRECT_URI]"> <meta name="appleid-signin-state" content="[STATE]"> <meta name="appleid-signin-nonce" content="[NONCE]"> <meta name="appleid-signin-use-popup" content="true"> </head>
使用JS API配置授權物件
<script type="text/javascript">
AppleID.auth.init({
clientId: '[CLIENT_ID]',
scope: '[SCOPES]',
redirectURI: '[REDIRECT_URI]',
state: '[STATE]',
nonce: '[NONCE]',
responseType: '[RESPONSE_TYPE]'
responseMode: '[RESPONSE_MODE]'
usePopup: true
});
</script>
配置授權物件引數解析
clientId- 對應開發者賬號配置生成的 Serivces IDscope- 授權範圍，可以是name、email或者name emailredirectURI- 重定向 URI，是 Apple ID 認證完成後重定向到的 URIstate- 狀態，一個隨機字串，用於防止 CSRF 攻擊nonce- 一個隨機字串，用於防止重放攻擊responseType- 響應型別，可以是code或tokencode: 授權碼模式，Apple ID 認證完成後返回一個授權碼，客戶端需要使用該授權碼換取訪問令牌token: 隱式模式，Apple ID 認證完成後直接返回一個訪問令牌，客戶端可以直接使用該令牌訪問受保護的資源responseMode- 響應模式，可以是form_post、fragment或者queryform_post: 表單提交模式，Apple ID 認證完成後將授權碼或訪問令牌透過表單提交返回fragment: URL片段模式，Apple ID 認證完成後將授權碼或訪問令牌透過URL片段返回query: 查詢字串模式，Apple ID 認證完成後將授權碼或訪問令牌透過查詢字串返回usePopup- 是否使用彈窗模式，預設為false
登入按鈕構建
可以參照開發者文件，配置屬性顯示按鈕。登入按鈕屬性配置
<div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
也可以根據業務需求，透過CSS自定義登入按鈕樣式
觸發登入
走 Apple 登入之前，必須先呼叫 AppleID.auth.init 方法去初始化 Apple ID 認證。不然 SDK 會報錯誤資訊：
初始化 Apple ID 認證後，後續可以呼叫 AppleID.auth.signIn 進行 Apple ID 登入。
編碼
<template>
</template>
<script>
export default {
name: 'AppleLogin',
created () {
this.initAppleLogin()
},
methods: {
// 初始化 Apple ID 認證
initAppleLogin () {
if (AppleID?.auth) {
const nonce = Math.random().toString(36).substr(2, 10);
AppleID.auth.init({
clientId: '',
redirectURI: '',
responseType: '',
scope: '',
state: '',
responseMode: '',
nonce,
});
}
this.signInAppleLogin()
},
// 呼叫 Apple ID 登入
signInAppleLogin () {
try {
AppleID.auth.signIn()
} catch ( error ) {
console.error(' Apple Sign In Error: ', error);
}
},
}
}
</script>
code獲取
服務端302重定向到前端的 url 的格式：http://前端指定的路由?code=&idToken=&state=&user=
前端需要透過JWT解析idToken
這個 idToken 包含了使用者的資訊，例如使用者名稱，郵箱等。 然而，這個 idToken 是被 Apple 透過 JWT 加密過的，需要解密後拿到其中的 sub 屬性值去跟 Apple 伺服器換取資訊
jwt使用
// 安裝
npm i -S jwt-decode
// 使用
import { jwtDecode } from "jwt-decode";
const token = "eyJ0eXAiO...";
const decoded = jwtDecode(token);
/**
{
"iss": "https://appleid.apple.com",
"aud": "",
"exp": ,
"iat": ,
"sub": "",
"nonce": "",
"c_hash": "",
"email": "",
"email_verified": ,
"is_private_email": ,
"auth_time": ,
"nonce_supported":
}
*/
