How to Sign in with Apple using a web page

劉冠志

6 min readJul 26, 2019

前言

最近 wwdc 2019 之後，我想之後熱門關鍵字少不了 Sign in with Apple , 官方要支援所有平台，並且可以讓使用者選擇要不要揭露 e-mail , 這對保護個資和防廣告真是一大福音。

準備工作

之前自己已自行完成 Sign in with Apple of iOS 的登入實作，沒有感覺特別要處理的事。應該是自家產品的關係吧，用在別的平台才發現有很多不一樣的作法如下 :

要先有個Ａpple ID , 如果有就不需要，申請不難去官方網站就可 , 之後用 apple ID login , 我是用開發者帳號登入 , 之後 user 的 apple ID 跟server的連接就交給後端工程師去處理了。
接下來去申請新的 App IDs, 並且填入內容後，開通 Sign in with Apple

3. 一樣申請新的 services IDs , 等一下要關聯 Bundle ID, 一樣打勾 Sign in with Apple

這邊說明一下:

選項有要填入 Domain , 這是要真的對外可連線的 , 之前偷懶用 localhost 改成 eample.com 以為可以驗證成功 , 後來還是失敗 , 而上面 Return URLs 輸入的網址 : https://example-app.com/redirect 這是 Apple 官方提供驗證是否可以在後台拿到 ID 資料 , 網上也有很多示範後台如何用PHP or Node JS 實作 , 我就不在說明這部分 , 所以我先以手動方式示範給大家看流程。

4. 申請 User 的私鑰

實作登入

<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>

打開瀏覽器輸入:127.0.0.1:8080

官方提供的登入的資料變數

<html>
    <head>
    </head>
    <body>
        <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
        <div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
        <script type="text/javascript">
            AppleID.auth.init({
                clientId : '[CLIENT_ID]',
                scope : '[SCOPES]',
                redirectURI: '[REDIRECT_URI]',
                state : '[STATE]'
            });
        </script>
    </body>
</html>

說明如下: