2020-09-11

Sign in with Apple NODE,web端接入苹果第三方登录

在 WWDC19 大会上,苹果公司推出了一项有意思的内容,即 “Sign In with Apple”。这项由苹果提供的认证服务,可以让开发者允许用户使用 Apple Id 来登录他们的应用程序,Sign In with Apple使用OAuth登录授权标准。  本文将介绍使用苹果登录的整个流程,并演示如何用NODE在Web端接入苹果三方登录。  

Apple ID 的双重认证

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

 工作原理

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

          由于只输入密码不再能够访问您的帐户,因此双重认证显著增强了 Apple ID 以及所有通过 Apple 储存的个人信息的安全性。  

          登录后,系统将不会再次要求您在这台设备上输入验证码,除非您完全退出登录帐户、抹掉设备数据或出于安全原因而需要更改密码。当您在 Web 上登录时,可以选择信任您的浏览器,这样当您下次从这台电脑登录时,系统就不会要求您输入验证码。

 登录流程

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

923531277-5db125c7a7fae_articlexuploading.4e448015.gif转存失败重新上传取消

Apple开发者账号

申请

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

     

配置

  • 当我们拥有一个苹果开发者账号后,需要进行相关配置来获得我们在web端接入apple登录时,所需要的一些id和文件,并做一些相关验证,此过程非常繁琐,此篇文章对配置流程有很详细的讲解,可以点击查阅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)。

苹果开发者文档提供了两篇在Web端接入苹果登录相关的文档

 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="appleid-signin-state" content="[STATE]">

    </head>

    <body>

        <div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>

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

    </body>

</html>

  • 第二种,引入js文件后将得到AppleID对象,监听click点击事件,点击后直接执行AppleID.auth.init 方法,将配置信息以对象的形式传进去,自动跳转到授权页

<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>

官方文档对参数的定义如上图跳转去连接

  •  client_id:获取的client_id,必传
  • redirect_uri: 设置的重定向url,当用户同意授权后,会发起一个该URL的post请求,开发者需要在后台设置相应接口去接收他,服务端通过apple传来的code参数去请求身份令牌,必传。
  • scope:权限范围,name或者email,或者两个都设,只有设了权限范围,你才能在授权过程中得到相应的用户信息。
  • state:表示客户端的当前状态,可以指定任意值,会原封不动地返回这个值,你可以通过它做些验证,生成一个随机数,并存在服务端,当获取token时对比传回的 state 是否时同一个,来避免一些攻击。

这里面只有client_id,redirect_uri,是必须的,其他如果不设会自动设置默认值。

你可以使用官方提供的按钮,当然也可以不用,当你点击登录按钮后会实际会跳转到一下地址,你可以选择直接手动拼接跳转授权页地址。

https://appleid.apple.com/auth/authorize?client_id=[CLIENT_ID]&redirect_uri=[REDIRECT_URI]&response_type=[RESPONSE_TYPE]&scope=[SCOPES]&response_mode=[RESPONSE_MODE]&state=[STATE]

如果手动拼接的话 response_type 应设为 code, response_mode应设为form_post,

2. 接收授权码code,并向apple申请Token

当用户给予授权后,apple服务器将发起一个POST请求至当时设置的redirectURI,同时附上一个授权码code,id_token可用于刷新token,这里的id_token字段只有通过验证后才会有,首次请求并没有这个字段,首次验证通过后再次登录可直接通过解析这个id_token来获得用户唯一标识,这里首次登录,我们将只有codestate,如下图

下图是官方文档对请求参数的解释跳转去连接,只有用户取消授权时才会返回唯一一个错误码user_cancelled_authorize

*值得注意的是当用户首次登录时,apple将返回给我们user字段(如上图),里面有用户名和邮箱(或匿名邮箱),我们应该将用户信息保存在服务端,与最终获取的用户唯一标识相对应。

 在首次登录过后我们将永远无法再次获取用户信息,只有用户手动取消appleId在该程序上的登录,并等待一段时间再次登录时才会重新发送用户信息,所以当我们首次请求时应及时把用户信息保存下来,如下图,跳转去链接才会重新发送用户信息,所以当我们首次请求时应及时把用户信息保存下来,如下图,跳转去链接

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值