微信小程序怎么实现登录

今天小编给大家分享一下微信小程序怎么实现登录的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

一、小程序开发前准备

二、小程序登录

我先开始的时候在登录就出问题了，因为当时官方给的文档就让人很纠结，因为官方给的文档让人感觉就凌乱了，在这里我解释一下，

官方给的流程：

第一步：获取用户授权信息（每次的授权信息都不一样）

第二部： 上代码

wx.request({  url : API_URL,//自己的服务接口地址  method : 'POST',  // 在这里需要格外注意了，所有的post请求header必须是下面的格式不然你又入坑了  header : {'content-type':'application/x-www-form-urlencoded'},  data :  {  iv: res2.iv,  code: code,  encryptedData: res2.encryptedData  },  success: function (data)  {  // 4.解密成功后 获取自己服务器返回的结果  // 解密的sdk在开发文档上搜索-签名加密-然后你阅读后就知道了-下载属于自己语言的解码包  if(data.data.status == 1)  {  var userInfo_ = data.data.userInfo;  }else  {  console.log('解密失败')  }  },  fail:function()  {  console.log('系统错误')  } })

他的意思是所有的操作在后台进行，这样相对安全一点，还有一点就是公众号需要的unionId可以通过解密获取到，那样的话就可以在公众号的页面看到你的小程序了，unionId是公众号和小程序的共用ID，如果你们的项目是需要关联的话那我还是建议你按照官方的走，如果不是的话，下面的方式可以迅速解决你的登录问题

自定义流程：

//app.js function Login(code,username,img) {  var that = this  wx.request({  url:HTTP_URL,  data:  {   appid : '你后台获取的appdi',   secret : '你后台获取的secret',   js_code : code,   grant_type : 'authorization_code'  },  method:'GET',  header:{'content-type': 'application/json'},  success: function (a)  {   var openid = a.data.openid   // 请求自己的服务器   wx.request({   url:API_URL,   data:   {    img : img    openid : openid,    username : username,   },   success: function(b)   {    // 成功返回用户的唯一ID(这是数据库ID)    console.log(b.data.uid)    // 我这里是把用户返回的ID存到了缓存里因为，我在使用全局变    // 量时候发现有时候引入了js但是还会有丢失找不到的现象    wx.setStorageSync('uid', b.data.uid)   }   })  },  fail: function ()  {   // 在这里你要考虑到用户登录失败的情况   wx.showToast({   title: '网站正在维护中...',   icon: 'loading',   duration: 10000   });  }  }) } // 自己服务器的地址 // 注意：开发时可以是http协议，但是如果上线必须申请https协议（也就是SSL协议）协议可以在阿里和腾讯的控制 // 台都可以购买，例子：阿里-管理控制台-安全（云盾）-证书服务，一般用dv免费的就可以了协议申请完后需要补全， // 补全完毕后下载文件是个压缩包，里面有两个文件，把他们放到你服务器上，然后再配置文件中指明这是ssl协议并 // 且指明路径，这样 你就算配置成功了，至于如何配置，网上开源的教程挺多的，nginx有Apache也有如果你 var API_URL = "自己服务器的地址"; // 微信提供的接口地址：这里必须要把https://api.weixin.qq.com这个网址在微信后台安全域名中添加进去否则你会 // 感觉生活是如此的黑暗完全看不到希望 var HTTP_URL = "https://api.weixin.qq.com/sns/jscode2session?appid=appid&secret=app_sectet&grant_type=authorization_code&js_code=code"; App({  onLaunch: function ()  {  // 调用API从本地缓存中获取数据  var logs = wx.getStorageSync('logs') || []  logs.unshift(Date.now())  wx.setStorageSync('logs', logs)  },  getUserInfo: function (cb)  {  var that = this  if(this.globalData.userInfo)  {   typeof cb == "function" && cb(this.globalData.userInfo)  }else  {   // 调用登录接口   wx.login({   // login流程   success: function (res)   {    //登录成功    if (res.code)    {    // 这里是用户的授权信息每次都不一样    var code = res.code;    wx.getUserInfo({     // getUserInfo流程     success: function (res2)     {     // console.log(res2)     that.globalData.userInfo = res2.userInfo     typeof cb == "function" && cb(that.globalData.userInfo)     var username = res2.userInfo.nickName     var img = res2.userInfo.avatarUrl     // 请求自己的服务器     Login(code,username,img);     }    })    }else    {    wx.showModal({     title: '提示',     content: '获取用户登录态失败！'+res.errMsg    })    }   }   })  }  },  globalData:  {  userInfo:null  } })

下面附两张图片是申请SSL协议的大概流程图

以上就是"微信小程序怎么实现登录"这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。