如何使用小程序登录能力

查看开发文档 。

一、触发登录的入口

开发者选择合适的场景,进行用户登录引导:

  • -

    设计全页/局部模块的登录引导时,建议围绕当前场景,配置相应的图标和文案说明、登录入口:

    示例1:我关注的人、我的评论等全页登录引导场景按不同的场景配置了不同的功能图标和登录说明引导文案;示例2:使用局部功能模块登录引导时,可适当展现更多推荐内容。

    二、选择登录的交互流程

    1. 百度授权登录按钮/文字链:一步完成,用户步长最短;点击后直接触发授权弹窗;

    2. 登录中间页:统一多场景的登录体验,更大设计空间;点击页面内的“百度授权登录”按钮,触发授权弹窗。

    示例1:点击登录按钮,触发登录授权。 你的浏览器不支持该视频播放
    1. 0.7 倍
    2. 1.0 倍
    3. 1.2 倍
    4. 1.5 倍
    5. 2.0 倍
    6. 你的浏览器不支持该视频播放
    示例2:从登录中间页触发登录授权。 你的浏览器不支持该视频播放
    1. 0.7 倍
    2. 1.0 倍
    3. 1.2 倍
    4. 1.5 倍
    5. 2.0 倍
    6. 你的浏览器不支持该视频播放

    1. 百度授权登录按钮/文字链

    在百度APP中,配合“百度用户授权登录”文案的按钮/文字链,体现官方权威感,增强用户信任;如展示空间较小,也可以直接使用“授权登录”文案的按钮/文字链。 建议直接使用 百度授权登录按钮 (1) ,也可根据自身品牌进行样式自定义(2)。

    2. 登录中间页

    小程序登录流程中,如需用户多次授权,建议使用登录中间页,提高页面稳定性。 设计登录中间页的要素与弹窗相似,应体现品牌、登录说明引导文案和授权登录按钮。中间页有更大的展示空间,使用此形式时可考虑进行放置相关内容或品牌扩展。 1. 你的浏览器不支持该视频播放
    1. 0.7 倍
    2. 1.0 倍
    3. 1.2 倍
    4. 1.5 倍
    5. 2.0 倍
    6. 你的浏览器不支持该视频播放
    正确 如需手机号和公开信息授权,建议从登录中间页触发。 你的浏览器不支持该视频播放
    1. 0.7 倍
    2. 1.0 倍
    3. 1.2 倍
    4. 1.5 倍
    5. 2.0 倍
    6. 你的浏览器不支持该视频播放
    错误 用户刚进入小程序,自动连续弹出手机号和公开信息授权弹窗。

    三、避免以下体验不佳的情况

    1. 违反功能实现规范

    说明:小程序页面顶部、中间、底部等所有的分类导航按钮,点击后均应该跳转对应的二级页面。

    你的浏览器不支持该视频播放
    1. 0.7 倍
    2. 1.0 倍
    3. 1.2 倍
    4. 1.5 倍
    5. 2.0 倍
    6. 你的浏览器不支持该视频播放
    错误 切换底部导航TAB时,调起授权面板。 你的浏览器不支持该视频播放
    1. 0.7 倍
    2. 1.0 倍
    3. 1.2 倍
    4. 1.5 倍
    5. 2.0 倍
    6. 你的浏览器不支持该视频播放
    错误 切换底部导航TAB时,调起登录弹窗。 你的浏览器不支持该视频播放
    1. 0.7 倍
    2. 1.0 倍
    3. 1.2 倍
    4. 1.5 倍
    5. 2.0 倍
    6. 你的浏览器不支持该视频播放
    错误 切换底部导航TAB时,在当前页面调起登录中间页。

    说明:跳出弹窗时,用户可选择接受或拒绝,不允许出现弹窗无法关闭的情况。

    正确 用户可以选择登录,也可以不登录。 错误 不允许出现弹窗无法关闭的情况。

    说明:各个功能的排版、样式、位置要合理,确保用户在任何场景下都可以迅速找到该功能。

    正确 保证可读性的前提下,通过适当的颜色搭配辅助品牌定位。 错误 按钮可读性差(1),请不要使用警示色(2)或置灰色(3)。

    2. 违反不妨碍用户规范

    说明:不允许频繁多次跳出不必要的获取定位、手机号等获取用户权限或其他广告弹窗。

  • - 错误 不登录无法看到任何内容。 错误 进入首页就强制弹窗要求登录。

    说明:不允许在用户主要路径放置不可关闭的悬浮组件,干扰用户浏览体验。

    错误 在小程序首页放置不可关闭的浮层、悬浮按钮,影响阅读体验。

    3. 不符合百度核心能力接入要求

    错误 未使用小程序授权能力登录。 错误 刻意弱化小程序授权能力登录。

    相关开发能力

  1. 申请使用。

  2. 查看开发文档。