Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge about how WeChat Mini Programs can log in. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

I. pre-development preparation of Mini Program

II. Log in on Mini Program

I had a problem logging in at the beginning, because the official documents were very confusing, because the official documents made people feel messy. Let me explain here.

Official procedure:

Step 1: obtain user authorization information (the authorization information is different each time)

Part II: code

Wx.request ({url: API_URL,// 's own service interface address method: 'POST', / / need to pay special attention here. All post requests header must be in the following format or you will join header: {' content-type':'application/x-www-form-urlencoded'}, data: {iv: res2.iv, code: code, encryptedData: res2.encryptedData}, success: function (data) {/ / 4. After successful decryption, get the results returned by your own server / / decrypted sdk search on the development document-signature encryption-then you will know-download the decoding package if (data.data.status = = 1) {var userInfo_ = data.data.userInfo in your own language. } else {console.log ('decryption failed')}, fail:function () {console.log ('system error')})

What he means is that all operations are carried out in the background, so that it is relatively safe, and another point is that the unionId needed by the official account can be obtained through decryption, so that you can see your Mini Program on the official account page. UnionId is the common ID of the official account and Mini Program. If your project needs to be related, then I suggest you follow the official way, if not. The following ways can quickly solve your login problem

Custom process:

/ / app.js function Login (code,username,img) {var that = this wx.request ({url:HTTP_URL, data: {appid: 'appdi', secret obtained by you backend:' secret', js_code: code, grant_type: 'authorization_code'}, method:'GET', header: {' content-type': 'application/json'} Success: function (a) {var openid = a.data.openid / / request your own server wx.request ({url:API_URL, data: {img: img openid: openid, username: username,} Success: function (b) {/ / successfully returned the unique ID of the user (this is the database ID) console.log (b.data.uid) / / I am storing the ID returned by the user in the cache because When I use the global variable / / quantity, I find that sometimes js is introduced but there is a phenomenon that wx.setStorageSync ('uid', b.data.uid)}})}, fail: function () {/ / here you have to consider the user login failure wx.showToast ({title:' website under maintenance.', icon: 'loading', duration: 10000}) }}) / / address of your own server / / Note: when developing, it can be http protocol, but if you must apply for https protocol (that is, SSL protocol), you can purchase the protocol from both Ali and Tencent console / console. For example: Ali-Management console-Security (Cloud Shield)-Certificate service. Generally, you can use dv for free. You need to complete the application for the agreement. / / after completion, the download file is a compressed package, in which there are two files, put them on your server, and then the configuration file indicates that this is the ssl protocol and / / and specifies the path, so that even if you configure successfully, as for how to configure, there are many online open source tutorials, nginx also has Apache if you var API_URL = "address of your own server" / / the interface address provided by Wechat: the URL https://api.weixin.qq.com must be added to the backend security domain name of Wechat, otherwise you will / / feel that life is so dark that you can't see hope at all 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 () {/ / call API to get data from the local cache 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 {/ / call login interface wx.login ({/ / login process success: function (res) {/ / login success if (res.code) {/ / here is the user's authorization information that is different each time var code = res.code Wx.getUserInfo ({/ / getUserInfo process 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 / / request your own server Login (code,username,img) }})} else {wx.showModal ({title: 'prompt', content: 'failed to get user login status!' + res.errMsg})})}, globalData: {userInfo:null}})

Two pictures are attached below to show the general flow chart of applying for SSL agreement.

These are all the contents of the article "how to log in WeChat Mini Programs". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.