>  기사  >  위챗 애플릿  >  미니 프로그램에 대한 로그인 및 인증을 구현하는 방법

미니 프로그램에 대한 로그인 및 인증을 구현하는 방법

王林
王林앞으로
2021-03-01 09:59:412950검색

미니 프로그램에 대한 로그인 및 인증을 구현하는 방법

로그인:

미니 프로그램의 로그인을 구현하려면 미니 프로그램을 열 때 로그인을 완료하는 것이 좋습니다. 즉, app.js의 onlaunch 메소드에 미니 프로그램 로그인 코드를 추가할 수 있습니다.

다음과 같습니다:

//微信的登录方法wx.login({      success: res => {          //登录成功后会返回一个微信端提供的 code ,用来自定义登录使用
        console.log("code",res.code);          //向自己的后台发送请求
        wx.request({          url: this.globalData.URL+'login/',          data:{            code:res.code
          },          header:{            "content-type": "application/json"
          },          method:"POST",          success:function(e){            console.log(e)              //请求成功后会返回一个自己后端生成的 token 用来做其他操作的校验,把token保存在本地
            wx.setStorageSync("token", e.data.data.token)
          }
        })        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })

백엔드 코드:

from rest_framework.views import APIViewfrom rest_framework.response import Responsefrom app01.wx import Wx_loginfrom django.core.cache import cachefrom app01 import modelsimport timeimport hashlibclass Login(APIView):
    def post(self,request):
        param = request.data        if param.get("code"):            #Wx_login是微信为我们提供的登录方法,这里的data已经有一个session_key和openid了
            data=Wx_login.login(param.get("code"))            if data:                # 1 session_key+时间戳等到一个key.(md5
                md5=hashlib.md5()
                md5.update(data.get("session_key").encode("utf8"))
                md5.update(str(time.time()).encode("utf8"))
                key=md5.hexdigest()                #2 session_key与openid做绑定等到val
                val=data.get("session_key")+'&'+data.get("openid")                #3key->val存到redis,
                cache.set(key,val)                #4把openid存到数据库
                user_data=models.Wxuser.objects.filter(openid=data.get("openid")).first()                if not user_data:
                    models.Wxuser.objects.create(openid=data.get("openid"))                #5把key返回给小程序
                return Response({"code": 200, "msg": "suc","data":{"token":key}})            else:                return Response({"code": 202, "msg": "code无效"})        else:            return Response({"code":201,"msg":"缺少参数"})

Wx_login

import requests# appid={}&secret={}&js_code={}from app01.wx import settingsdef login(code):
    #code2Session是wx提供的url,填入你的appid和appsecret以及前端发送来的code
        url=settings.code2Session.format(settings.AppId,settings.AppSecret,code)

    reponse=requests.get(url=url)    #得到的data里面有session_key和openid。
    data=reponse.json()
    print(data)    if data.get("session_key"):        return data    else:        return False

settings

#你注册的小程序的 appid 和 appsecret,code2Session是有官方提供的。pay_mchid是商铺号,需要工商证才能办理,所以自己没法搞。
AppId="wx69a0dca5c6b02a43"AppSecret="9d0f80642f4861b53df04a2f7bd65a59"code2Session="https://api.weixin.qq.com/sns/jscode2session?appid={}&secret={}&js_code={}&grant_type=authorization_code"pay_mchid ='1415981402'pay_apikey = 'xi34nu5jn7x2uujd8u4jiijd2u5d6j8e'

로그인이 완료되었습니다

Authorization

html은 버튼과 클릭 이벤트일 뿐이므로 적어 두지 않겠습니다. 주로 클릭에 따라 이벤트가 무엇을 했는지

luying: function () {    //这个方法的作用是获取配置,看所有的权限
    wx.getSetting({        //获取成功后进入
      success(res) {        console.log("res", res.authSetting['scope.record'])          //authSetting是这个权限的列表,这一句是看里面有没有录音这个权限
        if (!res.authSetting['scope.record']) {            //没有权限的话就会走这一句,这个方法的作用是获取权限
          wx.authorize({              //固定写法权限就是scope.xxx这样的
            scope: 'scope.record',            success() {              // 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问
              wx.startRecord()
            },              //在失败前就已经调用了上面的获取权限,如果没有给权限的话,就会走这个方法。
            fail() {              console.log("你没有授权")
            }
          })
        } else {          // wx.startRecord()
        }
      }
    })
  },

(동영상 공유 학습: php video tutorial)

사용자 정보 획득 권한

사용자 정보에는 session_key, openid 등 일부 민감한 정보가 포함될 수 있기 때문입니다. , 프런트 엔드에서 얻으려고 합니다. 정보를 얻으려면 권한을 요청해야 합니다.

이 방법은 잘못되었다는 점에 유의해야 합니다

<button bind:tap="info">用户信息</button>

요청을 받을 때 몇 가지 핵심 사항이 클릭 이벤트에 전달되도록 이렇게 작성해야 합니다.

<button open-type="getUserInfo" bindgetuserinfo="info1">获取用户信</button>

js

info1: function (res) {    console.log(res, "按钮")    // wx.getUserInfo({
    //   success: function (res) {
    //     console.log(res, "用户信息")
    //   }
    // })
    var that = this
    //这个方法是用来看你session_key有没有过期的
    wx.checkSession({      success() {        //session_key 未过期,并且在本生命周期一直有效
        wx.request({          url: app.globalData.URL + "userinfo/",          data: {              //这个东西就是用户信息了,里面包含敏感信息,是按钮点击的时候传进来的
            encryptedData: res.detail.encryptedData,              //同上,也是点击的时候传进来的
            iv: res.detail.iv,              //登录成功后返回的token带上
            token: wx.getStorageSync("token")
          },          header: {            "content-type": "application/json"
          },          method: "POST",          success: function (e) {            console.log(e)

          }
        })
      },      fail() {        // session_key 已经失效,需要重新执行登录流程
        wx.login() //重新登录
      }
    })
  }

관련 추천: 미니 프로그램 개발 튜토리얼

위 내용은 미니 프로그램에 대한 로그인 및 인증을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제