一、 小程序登录设计的主要产品及接口 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. 产品界面设计
|