Apple Login

image-20190918100403625

什么是Apple Login?

  • 隐私

    只追踪用户昵称和邮箱

  • 安全性

    • 双重认证
    • Touch ID
    • Face ID
  • 支持平台

    • MacOS
    • iOS
    • tvOS
    • watchOS
    • Web
  • 防欺诈

    保证用户的真实性

人机交互

交互建议

  • 尽可能去掉苹果登录之后的表单填写 密码设置等操作
  • 尽可能所有的 Apple 平台和 Web 统一包含苹果登录

Apple Login 按钮

使用场景

  • 开始使用苹果登录

  • 继续使用苹果登录

    颜色

  • 白色无边框

    image-20190912174419037

  • 白色有边框

    image-20190912174559830

  • 黑色无边框

    image-20190912174624263

按钮大小

  • Apple Login按钮和其他登录按钮大小保持一致
  • Apple Login 按钮应该放在第一屏
  • Apple Login 最小宽度 (140px @1x / 280px @2x)
  • Apple Login 最小高度 (30px @1x/ 60px @2x)
  • Apple Login 最小的内间距 (高度的 1/10)

按钮的圆角样式

image-20190912174937000

审核指南

专门使用第三方或社交登录服务的应用程序(如Facebook登录,Google登录,使用Twitter登录,使用LinkedIn登录,使用亚马逊登录或微信登录)必须添加苹果登录

如果符合以下条件,则无需使用Apple登录:

  • 您的应用专门使用您公司自己的帐户设置和登录系统。
  • 您的应用是教育,企业或商业应用,需要用户使用现有的教育或企业帐户登录。
  • 您的应用使用政府或行业支持的公民身份识别系统或电子ID来验证用户身份。
  • 您的应用是特定第三方服务的客户,用户需要直接登录其邮件,社交媒体或其他第三方帐户才能访问其内容。

接入指南

原生 Apple 平台,适应于iOS,macOS,tvOS,watchOS

导入下面的框架

import AuthenticationServices

使用身份验证服务框架可以在用户输入凭据以建立其身份时改善用户体验。

  • 使用户能够使用Apple ID登录您的服务。
  • 使用户能够从应用程序的登录流程中查找其存储的密码。
  • 使用OAuth等技术在应用和Web浏览器之间共享数据,以利用应用中现有的基于Web的登录。
  • 在企业应用程序中创建单点登录(SSO)体验。

简单直接的注册和登录流程减轻了用户记住密码的负担。这鼓励使用强密码,从而提高安全性。

官方 Demo

https://docs-assets.developer.apple.com/published/8f9ca51349/AddingTheSignInWithAppleFlowToYourApp.zip

官方 Demo 的逻辑代码流程

未命名.001

Apple Login签名

键值 类型
com.apple.developer.applesignin 数组

默认值 Default

image-20190918101908648

在 Xcode 启用 Apple Login 功能(Xcode11)

image-20190918102020749

创建授权请求

let provider = ASAuthorizationAppleIdProvider()
let request = provider.createRequest()
let controller = ASAuthorizationController(authorizationRequests: [request])

查询授权是否过期

let user = authorization.credential.user
provider.getCredentialState(forUserID: user) { state, error in
    // Check for error and examine the state.
}

其他的流程代码参考上图 Demo 的代码逻辑图

Sign in with Apple JS

使用Apple登录是安全地加载新用户的最快方式。使用Apple登录还提供双因素身份验证。使用Apple JS登录,您可以允许用户使用Apple ID登录您的网站,而无需创建新的帐户和密码。

为您的应用启用Apple登录首先在Apple Developer帐户中注册您的应用程序。选择要求的用户信息,按钮演示样式,服务器集成和通知选项是将API与您的应用集成时需要考虑的重要步骤。

要在服务器和Apple服务器之间进行通信,请使用Apple REST API登录。或者,要让用户设置帐户并登录到您的原生iOS,macOS,tvOS和watchOS应用程序,请使用AuthenticationServices框架。

配置您的网页以使用Apple登录

嵌入 Apple Login JS

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

配置授权对象

纯 HTML
<html>
    <head>
        <meta name="appleid-signin-client-id" content="[CLIENT_ID]">
        <meta name="appleid-signin-scope" content="[SCOPES]">
        <meta name="appleid-signin-redirect-uri" content="[REDIRECT_URI]">
        <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
<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>

处理授权响应

报文类型:application/x-www-form-urlencoded

正确响应
字段 说明
code 一次性验证代码有效期五分钟
id_token 用户的 JSON Token 令牌
state 初始化函数配置的
user 包含scope属性中请求的数据的JSON字符串。返回的数据采用以下格式:{ "name": { "firstName": string, "lastName": string }, "email": string }
错误响应
字段 说明
state 初始化函数配置的
error 返回的错误代码

目前,唯一返回的错误代码是。当用户在Web流期间单击取消按钮时,将返回此错误代码。user_cancelled_authorize

使用Apple按钮显示和配置登录

创建一个包装器标签并设置id为“ appleid-signin”; 例如,<div id="appleid-signin"></div>

以下是如何使用Apple按钮创建和显示黑色登录的示例
<html>
    <head>
        <meta name="appleid-signin-client-id" content="[CLIENT_ID]">
        <meta name="appleid-signin-scope" content="[SCOPES]">
        <meta name="appleid-signin-redirect-uri" content="[REDIRECT_URI]">
        <meta name="appleid-signin-state" content="[STATE]">
    </head>
    <style>
        .signin-button {
            width: 210px;
            height: 40px;
        }
    </style>
    <body>
        <div id="appleid-signin" class="signin-button" 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>
其他属性

data-type(按钮的类型)

  • sign in(默认)
  • continue

data-color(按钮样式)

  • black(默认)
  • white

data-border(按钮边框)

  • false(默认)
  • true

Sign In 平台平台

适用于不能接入苹果登录 JS 的其他平台

添加自定义使用Apple登录按钮

从https://appleid.cdn-apple.com/appleid/button下载使用Apple登录按钮图像。将下载URL放入浏览器会触发下载可嵌入应用程序的PNG文件。通过向URL添加查询参数来自定义按钮图像。如果将无效查询参数发送到端点URL,则服务器将返回404 Page Not Found错误

参数 解释
height 按钮图像的高度。最小值和最大值分别为30和64,默认值为30。
width 按钮图像的宽度。最小值和最大值分别为130和375,默认值为140。
color 按钮图像的背景颜色。可能的值是whiteblack(默认值)
border 一个布尔值,用于确定按钮图像是否具有边框。默认值为false
type 返回的按钮图像的类型。可能的值是sign-in(默认值)和continue
border_radius 按钮图像的圆角半径。最小值和最大值分别为0和50,默认值为15
scale 按钮图像的比例。最小值和最大值分别为1和6,默认值为1
locale 用于按钮上文本的语言。可能的值是sk_SK ar_SA ca_ES cs_CZ da_DK de_DE el_GR en_GB en_US es_ES es_MX fi_FI fr_CA fr_FR hr_HR hu_HU id_ID it_IT iw_IL ja_JP ko_KR ms_MY nl_NL no_NO pl_PL pt_BR pt_PT ro_RO ru_RU sv_SE th_TH tr_TR uk_UA vi_VI zh_CN zh_HK zh_TW

发送所需的查询参数

将授权请求指向以下URL:https//appleid.apple.com/auth/authorize

参数 解释
client_id (必需)开发人员的客户端标识符,由WWDR提供
redirect_uri (必需)授权重定向到的URI
response_type (必填)请求的响应类型。有效值为code和。您可以申请其中一个或两个。请求响应类型时,必须是或。id_token id_token response_mode fragment form_post
scope Apple要求的用户信息量。有效值为nameemail。您可以请求一个,两个或全部
response_mode 预期的响应模式类型。有效值是queryfragment和。如果您请求任何范围,则值必须为。form_post form_post
state 请求的当前状态。
nonce 用于将客户端会话与ID令牌关联的String值。此值还用于缓解重放攻击

处理响应

响应请参考上文 JS 中对应返回值

将控制权返回给应用程序

支持自定义URL方案(iOS 12.0及更早版本和Android)的平台必须通过将其存储在其端点逻辑中的应用服务器上来处理授权流程产生的数据。然后,您必须重定向自定义URL方案(redirect_uri)以将控制权交还给应用程序。