联合登录/手机号授权登录内嵌组件是小程序平台推出的「新」授权登录组件。

组件介绍

智能小程序平台为开发者提供了联合登录 / 手机号授权登录组件，开发者在强依赖登录的业务场景可以通过调用该组件，快速完成小程序登录流程并获取用户手机号信息。

联合登录 / 手机号授权登录组件包括以下两部分功能：

1、对百度 APP 用户登录态的判断；

2、对百度 APP 已登录用户提供授权登录弹窗；对百度 APP 未登录用户提供“登录 & 授权半屏面板”，用户可通过该面板一键完成登录和授权操作。

组件优势

开发者使用联合登录 / 手机号授权组件后，能够直接获取用户的手机号信息，实现自有账号体系与百度账号体系的互通，同时为使用平台提供的用户资产服务奠定了基础。

申请流程

申请流程在小程序开发者后台完成，路径为：“小程序后台 -> 小程序管理 -> 功能管理 -> 获取用户手机号”。具体分为以下三部分：

1、信息填写：根据实际情况填写相关信息；

2、平台审核：信息提交后等待审核通过；

3、审核通过后，即可接入联合登录 / 手机号授权组件。

开发流程

在 button 组件中，将 open-type 设置为 getPhoneNumber ，并使用 bindgetphonenumber 作为获取用户手机号的回调。

返回值中的 encryptedData 和 iv 需要发送到服务端解密，详细可参考用户数据的签名验证和加解密。

Web 态说明：受浏览器限制，Web 态小程序暂不支持获取用户手机号功能，建议开发者使用 open-type 为 login 的方式登录。

示例

在开发者工具中打开

扫码体验

扫码体验

图片示例：

示例 1：百度 APP 未登录用户授权登录流程

示例 2：百度 APP 已登录用户授权登录流程

代码示例

SWAN

JS

<view class="wrap">

<view class="card-area">

<button open-type="getPhoneNumber" type="primary" bindgetphonenumber="getphonenumber">

联合登录/手机号授权组件

</button>

</view>

</view>

返回值示例

{

"detail": {

"encryptedData": "ZOrJtrJ4eWkDOciQmyXPfqJhcF4t+SJsLYuIWufKt+/aBsXjKH/3iv7GafIE5DqqfEQjor4=",

"errMsg": "getPhoneNumber:ok",

"iv": "ce93b68c8ae71460706f8w=="

}

}

来源：百度智能小程序