IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 小程序登录设计 -> 正文阅读

[移动开发]小程序登录设计

一、 小程序登录设计的主要产品及接口
1. 微信登录【wx.login】
a. 微信登录接口【wx.login】用于获取登录凭证。小程序调用微信登录接口,若调用成功,微信会返回用户登录凭证给产品服务端,这个凭证有效期只有5分钟,产品服务端要通过获得微信返回的登录凭证,去调用 【auth.code2Session】获得用户的OpenID和 会话密钥session_key。
b. 微信原文档:调用接口获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户在当前小程序的唯一标识(openid)、微信开放平台帐号下的唯一标识(unionid,若当前小程序已绑定到微信开放平台帐号)及本次登录的会话密钥(session_key)等。用户数据的加解密通讯需要依赖会话密钥完成

在这里插入图片描述

2. 微信登录凭证校验【auth.code2Session】

微信登录凭证校验【auth.code2Session】的作用是用微信登录【wx.login】获取登录凭证,换取用户的openid和 会话密钥。openid是用户唯一标识,用来在产品中标记用户身份,并同用户注册信息进行关联,关联后,下次用户在通过小程序登录,则直接可以使用微信的登录认证功能,方便用户便捷登录。
调用登录凭证校验【auth.code2Session】,会返回openid、session_key和unionid三个值。
特别注意的是unionid可以用来区分用户的唯一性,这个唯一是在整个微信体系内的唯一,包括网站、公众号、App,同一个用户,unionid是唯一的。如果你的产品涉及腾讯多个应用的登录,为了便于将用户都关联起来,可以用户unionid进行统一的用户识别。
在这里插入图片描述

3. 获得用户信息接口【wx.getUserProfile】
a. 获取用户信息。页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo

获得用户信息接口,归属在授权相关功能下。
用户进入某个产品的小程序时,会询问获得用户相关信息,由用户决定同意还是拒绝。授权相关接口有很多,例如用户信息、地理位置、后台定位、微信运动、录音、摄像头等。和产品登录场景相关的,我们主要使用用户信息这个授权就可以。
使用【wx.getUserProfile】。获得用户信息授权后,产品可以将用户的信息生成自己产品的用户体系的用户资料。需要注意的是,这个接口调用后,就会发起用户授权的弹窗,为了不打扰客户,这个接口要谨慎使用,在用户第一次授权后,可以将用户头像的图片地址储存下来,以后再用,就不需要频繁弹窗了。
注意:当用户头像有变动,原头像的链接就不能使用了,这时需要再次调用获得用户最新的信息。
在这里插入图片描述

二、 小程序登录产品设计

1. 产品设计原则
a. 产品定位,目标用户群体
b. 界面风格统一
c. 功能直观易用
d. 影响登录注册设计的主要因素
一、 目标用户群体
1. 根据目标用户区分,
a. 手机号登录 
b. 邮箱登录
c. 第三方授权
二、 业务模式
1. 电商类产品期望用户持续购物,故搭建完善的账户体系、针对不同层级用户精细化运营是重中之重。
2. 社交类产品用户有丰富的私人信息,则重点凸出微信授权登录,直接获取用户在微信上的头像、昵称信息。
3. 理财类产品则十分重视用户账户的安全性,除基础登录注册方式外,也开放生物识别方式进行登录注册,确保用户对产品安全感。
4. 部分流量严重依赖微信的服务号、小程序为了放低获取用户成本,只依赖微信授权信息创建账户。
2. 登录流程设计
a. 到了登录环节,先查看用户的Session是否过期。使用【wx.checkSession】接口,如果无效,则调用【wx.login】,获得用户的OpenID和Session。
b. 若用户Session有效,则去调取先前存储在本地的Token。用户首次登录,本地是不会储存Token的。如果获得了用户Token,则说明已经是老用户,可以根据用户的Token到产品的服务端获得对应用户的信息。登录完成。
c. 若本地没有存储Token,则调用【wx.login】,获得用户的OpenID和Session。这时,我们可以根据获得的用户OpenID到自己的服务器中进行匹配,如果有,说明是老用户,可以通过OpenID获得用户信息,并结合Session,生成Token,返回给微信小程序,并调用【wx.setStorageSyn】将Token保存在微信小程序客户端。登录完成。
d. 若获得的用户OpenID没有与服务器中用户数据匹配,则说明是新用户,这时,再使用【wx.getUserProfile】来询问用户授权获得用户信息。新增用户完成后,将Token保存在微信小程序客户端。登录完成。 

在这里插入图片描述

3. 产品界面设计

在这里插入图片描述

在这里插入图片描述

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-05-14 10:04:13  更:2022-05-14 10:06:00 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/25 1:56:05-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码