教你在 Node.js 项目中接入 Sign with Apple 第三方登录

最新推荐文章于 2024-06-15 09:43:15 发布

奇舞周刊

最新推荐文章于 2024-06-15 09:43:15 发布

阅读量2.9k

点赞数

本文链接：https://blog.csdn.net/qiwoo_weekly/article/details/102830186

版权

编者按：本文转载自 ThinkJS 知乎专栏，作者王文健，奇舞团前端工程师。

写在前面

在 WWDC19 大会上，苹果公司推出了一项有意思的内容，即 “Sign In with Apple”。这项由苹果提供的认证服务，可以让开发者允许用户使用 Apple Id 来登录他们的应用程序，Sign In with Apple使用OAuth登录授权标准。

本文将介绍使用苹果登录的整个流程，并演示如何用Node.js在Web端接入苹果第三方登录。

Apple ID 的双重认证

640?wx_fmt=jpeg

Sign in with Apple使用双重验证，简单说就是当你首次使用Apple登录一个设备时，在输入Apple id和密码之后，还需要在其他已登录的Apple设备上确认授权，并输入已登录设备上提供的验证码进行验证。

工作原理

有了双重认证，只能通过您信任的设备（如 iPhone、iPad、Apple Watch 或 Mac）才能访问您的帐户。首次登录一台新设备时，您需要提供两种信息：您的密码和自动显示在您的受信任设备上的六位验证码。输入验证码后，您即确认您信任这台新设备。例如，如果您有一台 iPhone 并且要在新购买的 Mac 上首次登录您的帐户，您将收到提示信息，要求您输入密码和自动显示在您 iPhone 上的验证码。

登录流程

登录一个Web网站，输入账号密码，apple设备弹出登录授权验证，输入验证码，即可登录。
首次登录会选择是否隐藏邮箱，选择隐藏将会使用apple提供的一个匿名邮箱而不是真实邮箱号。
当选择信任浏览器后，之后在此浏览器中登录只需要输入账号、密码即可。
在登录后用户可以随时在apple设备上取消apple id在该程序上的授权登录。
mac上safari浏览器上可直接验证登录。
也可以通过手机号等其他方式进行验证，apple设备开启双重认证，账户管理等一些常见使用问题可查此篇阅官方介绍Apple ID 的双重认证(https://support.apple.com/zh-cn/HT204915)

640?wx_fmt=gif

Apple开发者账号

申请

首先我们需要一个苹果开发者账号，进入https://developer.apple.com/account/#/welcome，点击底部加入苹果开发者计划，按里面流程注册账号即可，如下图。
值得注意的是，加入开发者计划是付费的，无论公司还是个人都是99美元。
具体注册流程不再赘述，可参考此篇文章苹果开发者账号申请和证书创建流程(https://www.jianshu.com/p/f10a10c6e8e3)

640?wx_fmt=png

配置

当我们拥有一个苹果开发者账号后，需要进行相关配置来获得我们在web端接入apple登录时，所需要的一些id和文件，并做一些相关验证，此过程非常繁琐，此篇文章对配置流程有很详细的讲解，可以点击查阅What the Heck is Sign In with Apple?(https://developer.okta.com/blog/2019/06/04/what-the-heck-is-sign-in-with-apple)
当配置结束后我们将获得我们所需的两个文件、三个ID、和一个URL连接，如下(演示用，非正确)
redirectURI = 'https://abc.baidu.com/appleAuth' // 自己设置的重定向域名，可添加多个

webClientId = 'com.baidu.abc.signInWithApple'; // 设置的client_id，一般是域名的反写

teamId = 'JI87S9KI7D'; // 10个字符的team_id

keyId = 'KOI98S78J6'; // 获取的10个字符的密钥标识符
一个以.p8结尾的文本文件，里面是生成的密钥，用作生成JWT，作为请求Token时的参数之一
另一个apple-developer-domain-association.txt文本放在项目代码中，作为账号配置过程中验证用，保证浏览器url输入https://abc.baidu.com/.well-known/apple-developer-domain-association.txt时，能外网访问到此文本中的内容，完成后点击苹果开发者账号配置过程中的验证按钮（具体操作参考上面推荐的配置文章），通过后可进行正常开发调试。验证通过后可删除此文件。

`正式开发（开始OAuth 2.0流程）`

`OAuth`

正式开发前我们可以先了解下OAuth 2.0的标准，OAuth是一个关于授权的开放网络标准，apple登录正是使用了此标准，如果你了解此标准的授权流程，在下面的开发中会觉得很熟悉，OAuth流程大概如下：

用户访问客户端，后者将前者导向认证服务器。
用户选择是否给予客户端授权。
假设用户给予授权，认证服务器将用户导向客户端事先指定的"重定向URI"（redirection URI），同时附上一个授权码。
客户端收到授权码，附上早先的"重定向URI"，向认证服务器申请令牌。这一步是在客户端的后台的服务器上完成的，对用户不可见
认证服务器核对了授权码和重定向URI，确认无误后，向客户端发送访问令牌（access token）和更新令牌（refresh token）。

更多关于OAuth的知识可点击查阅此篇文章。(http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html)

苹果开发者文档(https://developer.apple.com/documentation)提供了两篇在Web端接入苹果登录相关的文档，如下：

一篇是前端开发文档Sign in with Apple JS(https://developer.apple.com/documentation/signinwithapplejs)

一篇是服务端开发文档Sign in with Apple REST API(https://developer.apple.com/documentation/signinwithapplerestapi)，可点击链接查阅详细内容。

`1. 进入登录授权页`

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

前端操作非常简单，就是显示一个登录按钮，点击可跳转到苹果指定的授权登录页，苹果提供了一个js文件，你可以引入上面这个js文件然后直接在html中写入以下代码，页面将会出现苹果提供的登录按钮，点击即可跳转到苹果授权登录页。
第一种，你需要在mate标签的content属性中写入相关配置账号

<html>

    <head>

        <meta name="appleid-signin-client-id" content="com.baidu.abc.signInWithApple">

        <meta name="appleid-signin-scope" content="[SCOPES]">

        <meta name="appleid-signin-redirect-uri" content="https://abc.baidu.com/appleAuth">

        <meta name

最低0.47元/天解锁文章

奇舞周刊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
教你在 Node.js 项目中接入 Sign with Apple 第三方登录

编者按：本文转载自 ThinkJS 知乎专栏，作者王文健，奇舞团前端工程师。写在前面在 WWDC19 大会上，苹果公司推出了一项有意思的内容，即 “Sign In wit...
复制链接

扫一扫