介绍
这篇文章主要介绍小程序开发中用户登录和维护的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情。像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件。
让用户登录,标识用户和获取用户信息,以用户为核心提供服务,是大部分小程序都会做的事情。我们今天就来了解下在小程序中,如何做用户登录,以及如何去维护这个登录后的会话(会话)状态。
在微信小程序中,我们大致会涉及到以下三类登录方式:
<李> 自有的账号注册和登录
<李> 使用其他第三方平台账号登录
<李> 使用微信账号登录(即直接使用当前已登录的微信账号来作为小程序的用户进行登录)
第一和第二种方式是目前网络应用中最常见的两种方式,在微信小程序中同样可以使用,但是<强>需要值的注意强的是,小程序中没有<代码>饼干> 饼干>
我们今天主要来讨论一下第三种方式,即如何使用微信账号进行登录,因为这种方式和微信平台结合最紧密,用户体验比较好。
登录流程
引用小程序官方文档的登录流程图,整个登录流程基本如下图所示:
登录流程图
该图中,“小程序”指的就是我们使用小程序框架写的代码部分,“第三方服务器”一般就是我们自己的后台服务程序,“微信服务器”是微信官方的API服务器。
下面我们来逐步分解一下这个流程图。
步骤1:在客户端获取当前登录微信用户的<代码>登录凭证(代码)
在小程序中登录的第一步,就是先获取登录凭证。我们可以使用wx.login()方法并得到一个登录凭证。
我们可以在小程序的应用代码中发起登录凭证请求,也可以在其他任何页面页面代码中发起登录凭证请求,主要根据你小程序的实际需要。
应用程序({
,,onLaunch:函数(),{
,,,wx.login ({
,,,,,:成功,函数(res), {
,,,,,,,var code =, res.code;
,,,,,,,if (代码),{
,,,,,,,,,console.log(& # 39;获取用户登录凭证:& # 39;,+,代码);
,,,,,,,},{else
,,,,,,,,,console.log(& # 39;获取用户登录态失败:& # 39;,+,res.errMsg);
,,,,,,,}
,,,,,}
,,,});
,,}
}) 步骤2:将登录凭证发往你的服务端,并在你的服务端使用该凭证向微信服务器换取该微信用户的<代码>唯一标识(openid) 和<代码>会话密钥(session_key)
首先,我们使用wx.request()方法,请求我们自己实现的一个后台API,并将登录凭证(代码)携带过去,例如在我们前面代码的基础上增加:
应用程序({
,,onLaunch:函数(),{
,,,wx.login ({
,,,,,:成功,函数(res), {
,,,,,,,var code =, res.code;
,,,,,,,if (代码),{
,,,,,,,,,console.log(& # 39;获取用户登录凭证:& # 39;,+,代码);
,,,,,,,,,//,- - - - - - -安康;发送凭证,- - - - - - - - - - - - - - - - - -
,,,,,,,,,wx.request ({
,,,,,,,,,,,url:, & # 39; https://www.my-domain.com/wx/onlogin& # 39;
,,,,,,,,,,,数据:,{,代码:code }
,,,,,,,,,})
,,,,,,,,,//,- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
,,,,,,,},{else
,,,,,,,,,console.log(& # 39;获取用户登录态失败:& # 39;,+,res.errMsg);
,,,,,,,}
,,,,,}
,,,});
,,}
}) 你的后台服务(/wx/onlogin)接着需要使用这个传递过来的登录凭证,去调用微信接口换取openid和session_key,接口地址格式如下所示:
api.weixin.qq.com/sns/jscode2session?appid=APPID&秘密=SECRET& js_code=JSCODE& grant_type=authorization_code 这里是我使用了node . js表达构建的后台服务的代码,仅供参考:
router.get (& # 39;/wx/onlogin& # 39;,, function (申请,,,,下一个),{
let 才能;code =req.query.code
request.get({才能
,,,uri:, & # 39; https://api.weixin.qq.com/sns/jscode2session& # 39;
json:,,,,真的,
,,,q:, {
,,,,,grant_type:, & # 39; authorization_code& # 39;
,,,,,appid:, & # 39;你小程序的APPID& # 39;,
,,,,,秘密:,& # 39;你小程序的秘密,,
,,,,,js_code:代码
,,,}
,,},(呃,,,,数据),=祝辞,{
,,,if (response.statusCode ===, 200), {
,,,,,console.log (“[openid]“,, data.openid)
,,,,,console.log (“[session_key]“,, data.session_key)
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
