web网页集成Apple Sign in苹果授权登录

一、概要

现在越来越多的应用都集成了第三方授权登录了，而且由于苹果的iOS app上架审核规则，即如果有第三方授权登录，那么必须接入苹果Apple授权登录。那么针对苹果账号，网页端的苹果授权登录自然而然也变得很重要。

二、Apple Sign In官方文档

https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js/

三、步骤

3.1 web接入Apple Sign In所需的资料

1. 一个Apple 开发者账号
1. 开发者账号下配置一个App Id
1. 开发者账号下配置一个Service ID
1. 开发者账号下给Service ID的sign in Apple编辑中配置domains和website

针对一个Service ID，公司账号可以注册上限100个的网站，个人账号上限10个

1. 开发者账号下给新建一个key（可以下载导出p8格式文件，服务端会需要到）
1. 如果是公司账号要给服务端team id（就是右上角账号名字中的一组字符串）.

针对上述所需的资料，创建App Id的流程很简单，基本和Service ID类似，所以这里不赘述。

3.2 创建Service ID

在Identifier下，选择Service Ids类型，然后点击Identifiers旁边的“+”号
创建Service ID - 1

输入service id的描述，identifier（就是website网页上配置的client ID），要记得勾选 Sign in with Apple.
创建Service ID - 2

配置Sign in with Apple，点击Configure
点击Configure

选择一个App ID
配置网站的域名（我这里是测试和正式环境都配置了，localhost配置不了）
配置Return URLs（这里是需要提供一个服务端的接口，因为Apple会给这里面的url发送post请求）
注意点：domains和return urls都是用英文逗号,隔开的。domains中不要加http或者https，return urls中是要加http和https。

点击Next，点击Done就ok了。
确认website urls

3.3 新建一个key

可以下载p8文件出来，给服务端
download key

3.4 网页的html中配置

如果要使用service id中的return urls，那就需要服务端提供post接口。如果不用服务端，只用前端介入的话，可以使用pop up的弹出窗口模式。

如果使用pop up方式，那么在Facebook等第三方app中显示网页时，授权弹窗会被阻止，导致流程中断，切记

在html中配置script脚本

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

使用js或者ts脚本

AppleID.auth.init({
      clientId : '[CLIENT_ID]',
      scope : '[SCOPES]', // 比如[ 'name', 'email' ]
      redirectURI : '[REDIRECT_URI]',
      state : '[STATE]',
      nonce : '[NONCE]',
      usePopup : true // 这里如果是true，那么就是使用弹窗授权, return urls就用不到
});

// 直接使用promise的方式，当然也有使用document监听的
AppleID.auth.signIn()
.then(res => {
  
})
.catch(err => {
  
});

// 可选，document监听
// Listen for authorization success.
document.addEventListener('AppleIDSignInOnSuccess', (event) => {
    // Handle successful response.
    console.log(event.detail.data);
});


// Listen for authorization failures.
document.addEventListener('AppleIDSignInOnFailure', (event) => {
     // Handle error.
     console.log(event.detail.error);
});

使用signin方法得到的数据就是包括code、id_token参数的res，将这2个参数传给自己公司的接口，让服务端去从Apple端获取用户信息。

四、服务端所需的资料

Apple开发者账号的team id
Apple开发者账号的service id
Apple开发者账号的key文件（p8文件）

以上大概就是这些了，希望对大家有帮助。