解析新第三方登录方式——苹果登录「Sign in with Apple」

2 评论 1万 浏览 10 收藏 14 分钟

Apple登录,指的就是通过Apple ID登录第三方应用与网站,那么它究竟是如何实现与设计的呢?本文将展开详细的分析说明。

随着当时 iOS13 的发布,苹果亮相了一项新的功能,那就是「通过 Apple 登录」(Sign in with Apple) 。

现在,苹果的APP都需要在第三方登录这里接入「 Apple 登录」(Sign in with Apple),这篇文章给大家解析说明下苹果登录是什么,以及如何实现和设计的问题,接下来带大家一起来看看,希望能给产品和设计的朋友提供参考。

本文大纲:

本文将会以下面几点来让你更加了解「Sign in with Apple」:

一、什么是「Sign in with Apple」?

二、Apple登录操作与使用

三、如何取消「账号授权」?

四、产品接入「Sign in with Apple」

五、「Sign in with Apple」按钮设计规范

一、什么是「Sign in with Apple」?

使用「通过Apple登录」的功能,这样我们就可以直接通过Apple ID,去登录第三方App或者网站了。

通过面部识别ID和触控ID快速验证身份就好,其实就是和目前我们经常使用的微信、微博、QQ等「快速登录」方式类似,通过Apple ID登录来更好地保护我们的隐私安全。

官方要求所有使用 第三方登录 的 App,都 必须接入Sign in with Apple。

就像官方说的,使用 Apple 账号登录,App 只能获得我们的邮件地址和姓名。

甚至,我们可以不让 App 获得我们的真实邮箱地址,而是随机生成一个隐藏式的邮箱地址让其登录。

Apple 登录的作用

1)尊重隐私

用户保护用户隐私的【Sign in with apple】登陆项,也被IOS审核纳入了新的条例中。通过苹果在发布会上的描述,使用Apple登录可以向开发者隐藏自己的真实邮件,让iOS生成一个伪造的随机电子邮件地址,防止收到垃圾邮件。开发者的邮件通知会通过苹果随机提供的邮件地址转发到你的邮件地址。

2)内置安全性

可以验证身份的安全性,在苹果设备上能够提供双重保障,对用户来说苹果的安全性是值得信赖的。

3)处处可用

连接各种登录客户端口,如常用的手机App端、网页web端,还有watch OS等。

4)反欺诈

可以通过“Apple 登录“让你知道对方账户是真人还是需要检查的账户,这是一种设备端的机器学习功能。

二、Apple 登录操作与使用

登录演示:

1. App端-苹果登录

在使用「讯飞输入法」时,登录的时候发现可以选择第三方的苹果方式登录了。

选择「Apple」后,会弹出一个类似在 App Store 中下载应用的提示框。

重要的是名称是可以自己编辑的,编辑完成后,点击「继续」进入下一步。

之后,它会要求用户进行 Face ID/Touch ID 验证。验证成功之后就可以登录了。

在App Store应用商店的软件更新里,可以发现有部分应用已经在近期支持了Apple ID这种登录方式,

我其中的产品包括讯飞输入法、滴滴、喜马拉雅、懒饭等。

2. Web端-苹果登录

选择「苹果登录」后,直接跳转https://appleid.apple.com去输入你的「Apple ID」,之后验证无误即可登录。

使用中产品包括坚果云、有道云笔记等。

实际案例:讯飞输入法、有道云笔记、、喜马拉雅、老司机、有道云、懒饭。

三、如何取消账号授权?

当我们授权给了这些APP之后,怎么管理和取消这些授权呢?如果你担心账户的安全问题或者不想要登录某些应用了,那要取消操作也是非常简单的。

第一步:点击手机中的「设置」,点击你的「Apple账户」,然后接着点击进入「密码与安全性」。

将会看到一个选项,叫「使用您的 Apple ID 的 App」,点击进入,将会看到已经授权登录的APP应用列表们。(比如这里有个「抖音短视频」)

选择你想要取消授权的APP应用,如点击这个应用,会进入到详情页面,可以看到有「停止使用 Apple ID」的按钮,点击即可取消授权。

四、产品接入「Sign in with Apple」

接入「Sign in with Apple」虽然在iOS的新规中是要求所有使用第三方登录的应用,都要遵守,但是符合以下条件的 App,可以不接入:

  1. 使用自建账户和登录系统;
  2. 要求用户使用现有的教育或企业账户登录的教育、企业或商业类应用;
  3. 使用政府或行业支持的公民身份识别系统或电子 ID 来验证用户;
  4. 应用特定于第三方服务,用户需要使用邮箱、社交媒体或其它第三方账户才能访问其内容的应用。

现在对于新上架的应用,支持第三方登录方式的都基本要接入,不接入的话是会苹果所被拒绝的。

在产品设计项目里,想要接入这个功能,需要有「入口」——「授权请求」——「验证」——「验证结果」——「处理变更」五个流程步骤。

接入这个功能要考虑的跟用户端操作需求是匹配的,首先新增入口,用户点击反馈授权请求,进行验证用户数据,回调代理,发送验证,服务端会返回验证的结果,最终成功登录(或者失败处理)。

授权的操作过程有两步:

  1. Apple ID授权;
  2. 苹果的双重验证。

回调数据分为:

  • User ID——苹果用户唯一标识
  • 验证数据: Identity token, code验证数据
  • 苹果用户基础信息返回
  • Real user indicator用于判断当前登录的苹果账号是否是一个真实用户,取值有:unsupported、unknown、likelyReal

如果想要了解其他第三方登录方式的接入问题可以自行搜索,以上为参考方法。

五、「Sign in with Apple」按钮设计规范

在苹果官方描述里就有详细的「Sign in with Apple」按钮规范,这里简单来说说设计需要避开的坑和注意的事项。

1. 按钮的提示语

按钮的提示语需要注意的是Apple官方有提供以下三种,需要在其中选择最适合你产品体验的术语,并且在其他界面中统一使用:

WatchOS上系统提供了一个标题是:「登录」

2. 按钮的样式

根据平台的不同,系统提供最多3个选项来显示“Sign in with Apple”按钮:分别是白色,带轮廓的白色和黑色按钮。

白色:(建议在足够对比度的背景或者彩色暗色背景下使用)。

带轮廓的白色:(可适用在白色或者浅色背景下,避免在深色背景使用)。

黑色:(建议在白色或浅色背景下使用,请勿在黑色深色背景下使用)

3. 按钮样式

创建自定义登录的时候,需要显示左对齐的Apple图标,或者仅显示Apple的标识的登录按钮。

Apple图标传送门:https://developer.apple.com/design/resources/

使用系统标题:「Sign in with Apple」, 「Sign up with Apple」, 或 「Continue with Apple」。

保留标题的大写样式:按钮标题的所有变体都将第一个单词大写(即Sign或Continue)和Apple;所有其他字母均为小写。例如,不要通过大写标题中的每个字母来更改此样式。

使标题和徽标在按钮内垂直对齐:为此,将标题垂直对齐按钮的中间,然后添加徽标图像,确保其高度与按钮的高度匹配。由于徽标图像包括顶部和底部填充,因此在按钮中垂直对齐标题可确保标题,徽标和按钮保持正确对齐。

4. 苹果登录需要注意的点

  • 按钮规范问题
  • 标识使用问题

按钮规范问题:

(1)最小边距规范

在iOS,macOS和Web页面中,保持最小按钮尺寸和按钮周围的边距,下面数值可以参考:

如下图所示:

(2)按钮尺寸和圆角角半径3种方式

标识使用问题:

  • 切勿单独使用Apple图标作为按钮。
  • 使Apple图标文件的高度与按钮的高度匹配。
  • 不要裁剪图标文件。
  • 不要添加渐变填充。
  • 不要在图标文件中使用自定义颜色。

总结

如果你已经注册过的应用支持了Apple登录,也只需要在应用的账号设置绑定Apple ID就可以使用Apple登录了。

不过就目前发现的应用来看,支持Apple登录还是很少的,希望开发者们可以尽快的更新这个功能。在国内几乎都是「微信」「QQ」「微博」等快捷登录为主,现在注册登录更多绑定了手机号登录,那么「Sign in with Apple」的加入,能够为App登录带来多少冲击呢,能否在第三方登录方式占据一席之地,你会怎么看?

以上是个人的学习、理解与解析,欢迎有不同想法和补充。

相关链接:https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/introduction/

#专栏作家#

JaylonG(微信号JJ865477301),人人都是产品经理专栏作家。一枚擅长用产品思维看问题,用逻辑思维做分析,用情感体验做设计的产品爱好者。爱好广泛,欢迎交流,拒绝水友。

本文原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自 Unsplash ,基于 CC0 协议

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 如果是用苹果ID注册登陆 作为app方 是否会失去对于用户的抓手? 毕竟看到不少app在接入了apple id登录后 又加上了手机号的认证

    回复
  2. 请问 取消授权登录,之前在该app的用户信息,是不是就完全清除了?

    回复