昨天刚总结了网站使用Apple的WeatherKit的REST API接口,流程差不多,所以赶紧趁热打铁总结这篇《网站使用苹果登录Sign In with Apple》。

使用原生接口继承苹果登录很简单,本篇写一下网站跳转接入的方式实现APP和网站登录同一个用户。

一、创建APPID

1、创建app ID

网站是二等公民,是为app服务的,所以即便你仅仅只是需要网站登录,也依旧需要先创建APP类型的Bundle ID。

在开发者后台,选择Identifiers,创建一个App ID,类型是APP,在Capabilities勾选Sign In with Apple,然后选择Edit。在弹窗中根据需要选择标记为新的主app ID还是用其他的主app ID

主APP ID是标记分组的作用,同一个主APPID,用户只需同意就可以为每组应用程序和网站与您共享一次他们的信息。所以软件A、B、C可以用同一个主APPID来共享用户。

弹窗里填的通知地址是接收有关用户及其帐户的重要更新的回调地址,比如用户删除appleID、更改了邮箱等回调通知。配置了https接口即可

2025-01-03T10:13:13.png

2、创建Services IDs

Services IDs就是给网站使用了,在开发者后台,选择Identifiers,创建一个Services ID,填写描述和Identifier之后,选择continue,然后注册。

2025-01-03T10:15:21.png

注册之后,在开发者后台,选择Identifiers,右侧筛选Services ID,然后点击去编辑。勾选Sign In with Apple,之后点击Configure配置。

2025-01-03T10:13:43.png

  • Primary APP ID选择上面创建的APP的主id,用于绑定用户,用户在同一个主id的网站和app中可以共享用户信息。
  • Domains and Subdomains 是调用的网站域名和子域名,例如dongge.org,是调用的白名单,不包含路径
  • Return URLs就是用户网站授权之后,返回带授权码信息的url路径。

二、创建秘钥

同样在开发者后台,选择Keys,创建一个key文件,勾选Sign In with Apple功能,点击Configure,选择上面创建的主APPID,保存之后,会有一个Download选项,将这个文件下载下来。是一个 .p8 结尾的文件,重命名为key.txt为了后面加密更方便。

该文件只能下载一次,丢失或者删除的话,需要重新创建。同时也记录创建的Key ID,在列表页也可以看到Key ID。

三、签名

使用mac自带的终端命令行签名更方便。

1、在终端执行命令(需要有Ruby环境)

gem install jwt

Mac自带的有Ruby,如果你执行该命令报错不存在,可能是没安装Ruby或者版本过老,可以通过Homebrew安装Ruby之后再执行上面命令。

2、创建执行的ruby文件

新建纯文本文件,名字为client_secret.rb,放在上面key.txt文件同级目录。

内容

require 'jwt'

key_file = 'key.txt'
team_id = ''
client_id = ''
key_id = ''

ecdsa_key = OpenSSL::PKey::EC.new IO.read key_file

headers = {
  'kid' => key_id
}

claims = {
    'iss' => team_id,
    'iat' => Time.now.to_i,
    'exp' => Time.now.to_i + 86400*180
    'aud' => 'https://appleid.apple.com',
    'sub' => client_id,
}

token = JWT.encode claims, ecdsa_key, 'ES256', headers

puts token
  • team_id是开发账号的teamID
  • client_id是前面创建的Service ID,不是绑定的主APPID
  • key_id是前面创建秘钥时的key ID
  • 文件里面的exp过期时间最长六个月,过期调用的话需要重新更新,否则会报错401

3、生成Token

在client_secret.rb文件夹下,执行下面命令,就会生成一个tokens。这个token是服务器验证时会使用。

ruby client_secret.rb 

四、网站跳转

网站跳转可以自己拼接跳转路径,放个按钮直接跳转拼写的appleLoginUrl链接即可。

generalAppleLogin() {
      let time = new Date()
      let state = encodeURIComponent('ss' + time.getTime())
      
      //clientId修改为正确的Service ID
      let clientId = encodeURIComponent("com.web.serviceid")
      
      //回调地址修改为创建Service ID时填写的Return URLs
      let redirectUri = config.host + "login/appleCallback"
      
      //拼接跳转地址
      this.appleLoginUrl = `https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${clientId}&redirect_uri=${redirectUri}&state=${state}&scope=name email`
    },

回调token验证

在用户通过网页跳转,输入信息之后,会将用户code传到回调地址。

拿到用户code之后,请求https://appleid.apple.com/auth/token验证,

  • 参数client_id是创建的Services ID
  • client_secret是前面通过脚本创建的token
  • code是回调的用户code,只能使用一次,并且五分钟有效期
  • grant_type写死authorization_code

验证成功之后,苹果会返回用户的信息,信息中的 sub 值是用户的唯一标识符。现在可以将此值存储在自己的数据库中,并使用它来确定同一用户是否再次登录

参考文章


☟☟可点击下方广告支持一下☟☟

最后修改:2025 年 01 月 03 日
请我喝杯可乐,请随意打赏: ☞已打赏列表