微信小程序登录授权界面如何开发

当用户进入微信小程序登陆时,会出现一个登录界面,比如获取用户用户头像和昵称等,这些在微信小程序开发者而言,是可以获取用户数据的,下面就为大家介绍小程序各种姿势实现登录的方法 

微信小程序登录授权界面如何开发

本文的小程序登录指的是什么?

在本篇文章所讲的登录不仅仅指的是wx.login而是包括以下三点--

微信小程序登录授权界面如何开发

  • 获取用户基本信息
  • 调用微信wx.login接口
  • 实现服务器端登录

我需要获取用户头像和昵称要怎么做?

用户头像和昵称对于我们开发小程序几乎算是刚需,那么我们应该怎么样正确高效的获取&利用它们呢?

旧时代--自动授权一把梭

新时代--使用小程序的open-data

使用open-data时需要注意小程序基础库的版本。具体使用方式如下

 

其实可以将open-data看作图片或字符串,想要控制样式在外层加上view标签以及相应的class即可。

相比之前获取用户基本信息的方式,这个方案还是比较走心的,如果一些小程序只是对用户的头像昵称等基本信息有需求的话就不需要和以前一样大费周章的调一个getUserInfo,拿回来一堆用不上的东西。

我需要用户在服务器端实现登录该怎么做?

按照微信小程序的文档,能在服务器端完成登录(获取用户session_key/openid等),有三个前端传回的参数是必不可少的:

  • code
  • encryptedData
  • iv

code是通过wx.login获取的,而encryptedData & iv是从wx.getUserInfo中获取的。

但是,因为微信基础库更新,取消通过api调用getUserInfo的能力,需要使用button组件的开放能力[open-type]去调用getUserInfo方法。

上述获取数据的方法具体建议阅读官方文档:

有关getUserInfo的文档

有关login的文档

踩坑心得:请确保wx.login早于getUserInfo,不仅是代码执行层面的早,最好是login回调成功之后才去getUserInfo,不然可能会出现后端解密失败的情况,导致登录失败。

(还可以通过API方式调用getUserInfo的时候如何实现后端登录就不在此赘述了。)

尽管已经无法自动授权,我们还可以这样实现小程序的登录授权

总体来说有两种授权模式,一种是强制授权,另一种则是按需授权,无论是怎么样的流程基本都可以归类为这两种授权。

强制授权

  • 适用范围:对用户身份强依赖的小程序,用户一进来就必须要知道用户的相关信息,或者是用户一进来就必须根据用户id来拉取相关资源。

  • 授权模式:模式多种,但共同特点都是会打断用户正常进入小程序的流程,体验上有点瑕疵,在此列出两种模式:

    • 不跳转页面,无论点击页面中的任何地方都会弹出授权弹窗,(没有将鼠标点击录进去,实际是无论点哪都会触发授权)↓↓

     

    这种方案的实现方式其实很简单也很粗暴--将一个覆盖全屏的button组件以position: fixed的方式盖在需要这样登录的页面上,然后将其opacity设为0即可。

     

    • 跳转页面,检测到非登录用户则强制跳转到登录页,在里面进行登录逻辑的处理。

     

    就个人而言,还是比较喜欢这种授权模式的,和微信自己生态内的授权有些许相似,对用户来说不会那么突兀。

    具体实现方式--相比上一种就复杂一些了,这一种方式属于全局性质的拦截授权,会中断当前页面的所有动作,跳转至登录专用的页面,在登录页登录成功后再返回原页面。

     

按需授权

  • 适用范围:对用户身份规划十分明确、可以接受在用户做出某些动作之后再获取用户身份的小程序。

  • 授权模式:不会打断小程序页面的主流程,将授权加入主流程中。实现方式也是十分灵活,无论是列表或是图片甚至是一段文字,只要是需要用户手动触发的,都可以作为授权的发起时机。

    与上述强制授权中不跳转页面的方式类似,但是有一个巨大的差异--这种方式不会强制用户授权,而是在需要授权时才会出现,相对没有这么骚扰使用小程序的用户。

以上就是微信小程序登录授权界面如何开发 ,更多小程序开发文档可以关注网站。

小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序请查看:小程序商店


【本站声明】
  1、本站文章中所选用的图片及文字来源于网络以及用户投稿,由于未联系到知识产权人或未发现有关知识产权的登记,如有知识产权人并不愿意我们使用,如果有侵权请立即联系。
  2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。


KESION 科汛软件

KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商,长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。

KESION 不断通过技术创新,提供产品和服务,助力企业向数字化转型,通过科技驱动商业革新,让商业变得更智慧!



▼点击进入科汛官网了解更多



上/下篇
换一换相关推荐
精选内容
热点精选