apple oauth 三方登录

最新推荐文章于 2024-05-01 02:15:21 发布

蛋蛋wqt

最新推荐文章于 2024-05-01 02:15:21 发布

阅读量5k

点赞数 9

本文链接：https://blog.csdn.net/qq_36770474/article/details/118340500

版权

网站需要使用apple 三方登录，研究了一下，记录如下：

配置

正式开发（oauth2.0）

1.登录授权页面

2.接收授权码code，向apple服务器申请token

配置

我们拥有一个苹果开发者账号后，需要进行相关配置，会得到一些id和文件，苹果官方配置文档如下：https://developer.okta.com/blog/2019/06/04/what-the-heck-is-sign-in-with-apple

1.配置结束后，将获得俩个文件三个ID和一个回调URL

redirectURI = 'https://abc.baidu.com/appleAuth' // 自己设置的重定向域名，可添加多个

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

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

keyId = 'KOI98S78J6'; // 获取的10个字符的密钥标识符

2.一个以p8结尾的文件，用作生成jwt 用来请求token

正式开发（oauth2.0）

正式开发前，可以先熟悉一下oauth2.0的认证流程

1.用户点击导向到认证服务器

2.用户选择是否授权

3.授权后，认证服务器会带着授权码code请求重定向url

4.客户端获取到授权码code后，发送到后端服务器，然后用授权码code请求认证服务器

5.认证服务器验证授权码code 没问题后，返回access token 和refresh token

苹果官方文档

前端文档：

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

后端文档：https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_rest_api

1.登录授权页面

就是一个html页面，会显示一个苹果登录的按钮，点击登录按钮后，会跳转到认证页面

代码如下：

<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 : 'xxxxxx',
                scope : 'email name',
                redirectURI: 'xxxxxxxxxxxxxxxxxx',
                state : 'xxxxxxxxxxxx'
            });
        </script>
    </body>
</html>

clientId：配置获得

scope：权限范围，用来获取用户信息 email name 其中一个或者两个都设置

redirectURI：回调url，用户同意授权后，会带code向回调url 发起一个post请求，后端服务器需要去接受授权码code，然后去申请令牌

state：可以设定任意值，苹果认证服务器会返回这个值，可以利用这个参数来进行一些判断

我开发过程中，自己测试是利用上面的html页面，正式开发是手动拼接跳转授权页地址。

https://appleid.apple.com/auth/authorize?client_id=xxxxxxxxx&redirect_uri=xxxxxxxxx&response_type=xxxxxxxx&scope=email name&response_mode=[RESPONSE_MODE]&state=xxxxxxxxx
如果手动拼接的话 response_type 应设为 code, response_mode应设为form_post

2.接收授权码code，向apple服务器申请token

用户授权后，会向设置的 redirect_uri带着code发送一个post请求，还有设置的state，id_token（第一次授权登录没有这个字段），如果第一次授权登录，会返回用户信息user（第一次登录才有user信息，后面不能获取到，需要保存到服务端，如果再次获取，需要用户手动取消appleid在该应用程序上的授权）

苹果官方文档如下，Handle the Response部分有对返回参数的解释

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

特别注意：用户取消后，会返回error（user_cancelled_authorize）给redirect_uri，这种情况也是需要处理的

苹果post请求如下：