本文为您介绍H5页面一键登录的完整交互流程,涉及界面交互、网页端SDK方法调用及服务端集成的OpenAPI调用。
Demo体验
请扫描下方二维码,体验H5页面一键登录功能。

温馨提示:体验时建议关闭手机Wi-Fi网络连接,使用手机移动网络访问测试网址。
一键登录的交互流程
一键登录交互流程主要分为四个步骤:SDK初始化、唤起授权页面、用户同意授权并登录、服务端取号。

上图为完整的交互流程时序图。
流程步骤
初始化
用户访问H5页面,H5页面调用服务端集成的
GetAuthToken
接口获取Token(包括业务鉴权accessToken和API鉴权jwtToken两个参数)。H5页面调用SDK的
checkLoginAvailable
方法发起身份鉴权。鉴权成功后展示登录界面。
唤起授权页面
用户点击H5页面的“登录”按钮,调用SDK的
getLoginToken
方法进行预取号。获取到带有掩码的手机号后,唤起二次弹窗授权页,授权页会展示待补充完整的号码及运营商协议。
重要一键登录或注册需用户确认授权方可使用,且登录按钮文字描述必须包含“登录”、注册按钮文字描述必须包含“注册”等文字,不可诱导用户授权以及通过任何技术手段跳过或模拟此步骤,否则我方有权停止服务并追究相关法律责任。
对于接入移动认证SDK并上线的应用,阿里云对上线的应用授权页面做审查,若出现未按要求弹出或设计授权页面的,将停止应用的一键登录或注册服务。
用户同意授权并登录
用户输入手机号中间四位数字并同意相关协议。
单击授权页面的登录或注册按钮,SDK会根据用户输入的掩码返回换号spToken。
服务端取号
H5页面调用服务端集成的
GetPhoneWithToken
接口,换取用户完整手机号。服务端获取到用户完整手机号,可自行实现登录或注册业务逻辑,并返回结果给H5页面。
H5页面获取到登录状态,关闭授权弹窗。