小程序以各种姿势登录

最喜欢的后台时间——因为最近接触了很多小程序，刚刚经历了小程序的自动登录时代，现在又经历了点击登录时代。结合自己的实践和观察其他小程序，有这个小分享~

本文可能的内容-

本文中的小程序登录指的是什么？本文提到的登录不仅指wx.login，还包括以下三点-

获取用户基本信息，调用微信wx.login界面，实现服务器端登录

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

。用户的头像和昵称几乎只是我们开发小程序所需要的，那么我们应该如何正确高效地获取和使用它们呢？

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

新时代-开放数据使用小程序使用开放数据时，需要注意小程序基础库的版本。具体用法如下

实际上，开放数据可以看作是一张图片或一个字符串。如果要控制样式，请将视图标记和相应的类添加到外层。

相比之前获取用户基本信息的方式，这个方案还是比较谨慎的。如果一些小程序只需要用户头像昵称等基本信息，就不需要像以前那样费尽心思调整一个getUserInfo，拿回一堆自己用不上的东西。

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

根据微信小程序的文档，可以登录服务器(获取用户session_key/openid等。)，三个前端参数是必不可少的：

CodeencryptedDataivcode是通过wx.login获取的，而encryptedDataivcode是从wx.getUserInfo获取的

但由于微信基础库的更新，取消了通过api调用getUserInfo的能力，需要使用按钮组件的开放能力[open-type]来调用getUserInfo方法。

获取上述数据的方法，建议阅读官方文件：

关于getUserInfo的文档

关于登录的文档

体验：请确保wx.login早于getUserInfo，不仅在代码执行层面，而且在login回调成功后最好的时间到达getUserInfo，否则后端解密可能会失败，导致登录失败。

(在getUserInfo也可以通过API调用的情况下，如何实现后端登录，这里不再赘述。)

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

一般来说，授权模式有两种，一种是强制授权，另一种是按需授权，而无论是哪种流程基本上都可以归为这两种授权。

强制授权

适用范围：对于严重依赖用户身份的小程序，用户一进来就必须知道用户的相关信息，或者用户一进来就必须根据用户id拉相关资源。

授权模式：模式很多，但共同的特点是会中断用户进入小程序的正常过程，体验有点瑕疵。这里有两种模式：

如果不跳转到页面，无论点击页面的哪个位置，都会弹出一个授权弹出窗口，如图(鼠标点击没有记录，其实无论点击哪个位置都会触发授权)。

其实这个方案的实现非常简单粗暴——在需要登录的页面上覆盖一个覆盖全屏的按钮组件作为position: fixed，然后将其不透明度设置为0。

.yiyongtong.com/uploads/allimg/180815/0U92051A-4.png" />

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

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

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

按需授权

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

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

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