小程序各种姿势实现登录

喜闻乐见的背景时间--由于最近接触小程序比较多，又刚好经历过小程序的自动登录时代以及现在的点击登录时代。结合自己的实践以及观察到其他小程序的做法，就有了这篇小分享~

本文可能涉及的内容--

更新

首先感谢@shaonialife同学的精彩评论~

可能由于用词不当，让大家误认为getUserInfo被弃用，其实是我们在用户未授权的情况下无法通过API调用的方式使用getUserInfo。
文章里少体现一个重要内容：获取用户头像昵称，第一次需要使用 button 组件授权，如果已经用组件授权了，wx.getUserInfo 可直接返回用户数据，无需重复授权弹窗。这意味着我们可以先使用wx.getSetting来判断用户是否授权过getUserInfo，倘若授权过我们则可以调用wx.getUserInfo静默拿到想要的数据，如果没授权过的话就该怎么干就怎么干~

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

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

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

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

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

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

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

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

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

有关getUserInfo的文档

有关login的文档

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

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

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

适用范围：对用户身份规划十分明确、可以接受在用户做出某些动作之后再获取用户身份的小程序。
授权模式：不会打断小程序页面的主流程，将授权加入主流程中。实现方式也是十分灵活，无论是列表或是图片甚至是一段文字，只要是需要用户手动触发的，都可以作为授权的发起时机。

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