您的位置 首页 java

【玩转前端】手把手教你实现小程序登录

【玩转前端】手把手教你实现小程序登录

为了方便小程序应用使用微信登录态进行授权登录,微信小程序提供了登录授权的开放接口。乍一看文档,感觉文档上讲的非常有道理,但是当自己去实现时,又摸不着头脑,不知道如何下手。为帮助大家快速实现小程序登录,下面给大家来个手把手教学。

【玩转前端】手把手教你实现小程序登录

从上图我们可以看出,要想实现小程序登录,需要经过如下4步:

1、获取登录凭证code

在小程序里,获取登录凭证code,可以使用wx.login()这个API。登录凭证code的有效期只有五分钟,因此,五分钟之内你必须发送code,以获取 openid 和session_key。如下:

【玩转前端】手把手教你实现小程序登录

2、获取openid和 session_key

用过公众号的童鞋应该对openid这个标识都不陌生了,在公众平台里,openid被用来表示每个用户在订阅号、服务号、小程序这三种不同应用里的身份。

那么session_key是用来干嘛的呢?有了用户标识,我们就需要让该用户进行登录,那么session_key就保证了当前用户进行会话操作的有效性,这个session_key是微信服务端给我们派发的。也就是说,我们可以用这个标识来间接地维护我们小程序用户的登录态。

那么这个session_key是怎么拿到的呢?

要拿到这个session_key,我们需要在自己的服务端请求微信提供的第三方接口,如下:

【玩转前端】手把手教你实现小程序登录

按如图所示,提供如下四个参数:

【玩转前端】手把手教你实现小程序登录

如果是使用PHP开发,可以像下面这样:

【玩转前端】手把手教你实现小程序登录

3. 生成3rd_session_key

前面已经说过,小程序是通过session_key来“间接”地维护登录态。所谓间接,也就是我们需要自己维护用户的登录态信息,这里也是考虑到安全性因素,如果直接使用微信服务端派发的session_key来作为业务方的登录态使用,会被“有心之人”用来获取用户的敏感信息,比如wx.getUserInfo()这个接口呢,就需要session_key来配合解密微信用户的敏感信息。

因此,我们需要利用微信接口返回的session_key,来生成自己的3rd_session_key。这里可以使用几种常见的不可逆的算法,比如md5、sha1等,将生成后的登录态标识3rd_session_key返回给前端,并在前端维护这份登录态标识(一般是存入storage)。而在服务端呢,我们会把生成的3rd_session_key存在用户对应的数据表中,前端通过传递3rd_session_key来存取用户的信息。

如下是利用PHP生成3rd_session_key的示例:

【玩转前端】手把手教你实现小程序登录

4、检查登录态

第3步完成之后,我们知道小程序的storage里就会保存着3rd_session_key。虽然,本地的3rd_session_key不会过期,但是微信返回的session_key却是有失效性的,即便是不调用wx.login,session_key也会过期。过期时间跟用户使用小程序的频率成正相关,但具体的时间长短开发者和用户都是获取不到的。

那我们怎么知道session_key有没有过期呢?

这时,我们可以使用wx.checkSession()接口。如下:

【玩转前端】手把手教你实现小程序登录

如果当前session_key过期,就让用户来重新登录,更新session_key,并将最新的3rd_session_key存入用户数据表中。

注意事项

本文虽然将检查登录态wx.checkSession(),放在第4步(最后一步),但在实际的项目中,我们通常是在小程序刚启动时就执行这一步,如下:

【玩转前端】手把手教你实现小程序登录

另外,关于服务端部分,本文使用了PHP,但实际上Java、 Python 、Node……等都可以实现,官方给出的相关SDK里就包含了C++、Node、PHP、Python的内容。

本文系“编码之道”原创,转载请注明出处。


文章来源:智云一二三科技

文章标题:【玩转前端】手把手教你实现小程序登录

文章地址:https://www.zhihuclub.com/197148.shtml

关于作者: 智云科技

热门文章

网站地图