Django?+?Taro?前后端分離項(xiàng)目實(shí)現(xiàn)企業(yè)微信登錄功能
前言
還是最近在做的一個(gè)小項(xiàng)目,后端用的是Django搭配RestFramework做接口,前端第一次嘗試用京東開(kāi)源的Taro框架來(lái)做多端(目前需要做用于企業(yè)微信的H5端和微信小程序)
本文記錄一下企業(yè)微信登錄的流程,上周看文檔看得頭暈暈的,其實(shí)很簡(jiǎn)單,封裝好了就幾行代碼的事~
兩種方式
- 一種是先拼接好登錄要用的地址
authorize_url,回調(diào)地址設(shè)置成h5應(yīng)用的網(wǎng)頁(yè)入口,然后把authorize_url設(shè)置為企業(yè)微信里的應(yīng)用主頁(yè)就行,然后直接提取鏈接里的code - 另一種是在應(yīng)用里拼接
authorize_url地址,回調(diào)地址同樣設(shè)置成h5應(yīng)用的網(wǎng)頁(yè)入口,然后應(yīng)用里去請(qǐng)求authorize_url,然后提取鏈接里的code用來(lái)登錄就行
說(shuō)是兩種,其實(shí)流程都是一樣的,只不過(guò)第一種少去了前端拼接authorize_url以及首次請(qǐng)求的操作,為了方便起見(jiàn),本文推薦使用第一種
思路
假設(shè)前端地址是http://xxx.com,那么我們用后端生成的企業(yè)微信登錄地址中會(huì)把前端地址作為回調(diào)地址傳入,在企業(yè)微信中訪問(wèn)登錄地址之后,回跳轉(zhuǎn)到我們的前端地址,并在路徑中附上參數(shù)code,形式如下:
http://xxx.com?code=dkwawen123j13bk1
所以前端要做的就是拿到這串code,并提交給后端,讓后端拿code去微信服務(wù)器換用戶信息,就這樣~
后端代碼
企業(yè)微信登錄的接口已經(jīng)集成在我的「DjangoStarter」項(xiàng)目模板中,可以直接食用~
后端使用的是wechatpy這個(gè)庫(kù),非常好用,封裝了微信開(kāi)發(fā)的常用功能~
下面寫(xiě)一下兩個(gè)關(guān)鍵的方法
from django.conf import settings
from django.contrib.auth import login
from django.contrib.auth.models import User
from rest_framework.authtoken.models import Token
from drf_yasg2.utils import swagger_auto_schema
from drf_yasg2 import openapi
from rest_framework.exceptions import APIException
from rest_framework import viewsets
from rest_framework.response import Response
from rest_framework.request import HttpRequest
from rest_framework.decorators import action
from wechatpy.enterprise import WeChatClient
from apps.core.serializers import UserSerializer
class WechatWork(viewsets.ViewSet):
"""微信企業(yè)號(hào)相關(guān)認(rèn)證服務(wù)"""
client = WeChatClient(
settings.WECHAT_WORK_CONFIG['CORP_ID'],
settings.WECHAT_WORK_CONFIG['SECRET'],
)
@swagger_auto_schema(operation_summary='獲取微信企業(yè)號(hào)登錄鏈接')
@action(detail=False)
def get_authorize_url(self, request):
return Response({
# todo 這里要寫(xiě)上前端應(yīng)用入口地址
'url': self.client.oauth.authorize_url('http://xxx.com')
})
@swagger_auto_schema(
operation_summary='通過(guò)code登錄',
manual_parameters=[
openapi.Parameter(
name='code', in_=openapi.IN_QUERY,
description='從微信企業(yè)號(hào)服務(wù)器獲取到的code',
type=openapi.TYPE_STRING)
])
@action(detail=False, methods=['POST'])
def login_by_code(self, request: HttpRequest):
code = request.GET.get('code', None)
try:
user_info = self.client.oauth.get_user_info(code)
except Exception as e:
raise APIException(detail=e)
phone = user_info['UserId']
is_created_user = False
if User.objects.filter(username=phone).exists():
user_obj: User = User.objects.get(username=phone)
else:
is_created_user = True
user_obj: User = User.objects.create_user(username=phone, password=phone)
# 記錄Django登錄狀態(tài)
login(request, user_obj)
# 生成drf token
token, created = Token.objects.get_or_create(user=user_obj)
'user': UserSerializer(user_obj).data,
'user_info': user_info,
'successful': True,
'is_created_user': is_created_user,
'token': token.key,
'message': '企業(yè)微信登錄成功',
寫(xiě)完接口配置一下路由(這里就不重復(fù)了)
然后請(qǐng)求這個(gè)get_authorize_url接口,得到一個(gè)地址
{
"message": "請(qǐng)求成功",
"code": 200,
"data": {
"url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx386...&redirect_uri=http%3A%2F%2Fxxx.com&response_type=code&scope=snsapi_base#wechat_redirect"
}
}
比如我上面寫(xiě)的應(yīng)用入口地址是http://xxx.com,那么得到的企業(yè)微信登錄地址就是
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx386...&redirect_uri=http%3A%2F%2Fxxx.com&response_type=code&scope=snsapi_base#wechat_redirect
各個(gè)參數(shù)的意義看企業(yè)微信官方文檔就行,我們不用細(xì)究
企業(yè)微信應(yīng)用配置
接下來(lái)我們把這個(gè)地址設(shè)置成企業(yè)微信應(yīng)用的主頁(yè)
如圖

同時(shí)還得設(shè)置一下「可信域名」,在同個(gè)頁(yè)面的最下方「開(kāi)發(fā)者接口」處,把前端應(yīng)用部署所在的服務(wù)器域名和端口(80就不用)填上去就行~
這樣應(yīng)用配置就好了
前端代碼
前端用的是京東開(kāi)源的Taro框架,我前一篇文章寫(xiě)到我終于用上了React,說(shuō)的就是在Taro開(kāi)發(fā)里用React+TypeScript,開(kāi)發(fā)體驗(yàn)非常好 (除了這個(gè)框架有一些讓人無(wú)語(yǔ)的坑之外)
前端要實(shí)現(xiàn)的就是從路徑參數(shù)里取出code
我們看到,Taro官方文檔就有關(guān)于路由參數(shù)的處理
所以可以這樣寫(xiě)來(lái)獲取code(函數(shù)式組件寫(xiě)法)
import { getCurrentInstance } from '@tarojs/taro'
let code getCurrentInstance().router?.params['code']
然而!這樣在普通頁(yè)面跳轉(zhuǎn)是可以的
比如這種形式
http://xxx.com/#/pages/index/index?code=abc
但人家微信登錄回調(diào)跳轉(zhuǎn)的地址形式是這樣
http://xxx.com?code=abc&state=#/pages/index/index
這根本就拿不到code啊 o(´^`)o
所以得自己用js封裝一個(gè)
直接上代碼了
// 解析微信redirect_uri地址中的code
export const getCodeFromUrl = (url: string) => {
let code = ''
let index = url.indexOf('?')
let paramStr = url.substring(index + 1, url.length);
let params = paramStr.split('&')
params.forEach(element => {
if (element.indexOf('code') >= 0) {
code = element.substring(element.indexOf('=') + 1, element.length)
}
});
return code
}
使用的時(shí)候
let code = getCodeFromUrl(window.location.href)
就可以拿到code了
code都有了,后面就不用多說(shuō)了~
參考資料
wechatpy庫(kù)文檔:http://docs.wechatpy.org/zh_CN/stable/oauth.html
企業(yè)微信文檔:https://developer.work.weixin.qq.com/document/path/91335
Taro框架文檔:https://taro-docs.jd.com/taro/docs/router
到此這篇關(guān)于Django + Taro 前后端分離項(xiàng)目實(shí)現(xiàn)企業(yè)微信登錄 功能的文章就介紹到這了,更多相關(guān)Django前后端分離登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Python實(shí)現(xiàn)敏感詞過(guò)濾的五種方法
在我們生活中的一些場(chǎng)合經(jīng)常會(huì)有一些不該出現(xiàn)的敏感詞,我們通常會(huì)使用*去屏蔽它,一些罵人的敏感詞和一些政治敏感詞都不應(yīng)該出現(xiàn)在一些公共場(chǎng)合中,這個(gè)時(shí)候我們就需要一定的手段去屏蔽這些敏感詞,下面我來(lái)介紹一些簡(jiǎn)單版本的Python敏感詞屏蔽的方法,需要的朋友可以參考下2025-04-04
淺談python的elementtree模塊處理中文注意事項(xiàng)
這篇文章主要介紹了淺談python的elementtree模塊處理中文注意事項(xiàng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-03-03
Python實(shí)戰(zhàn)之多種音樂(lè)格式批量轉(zhuǎn)換
Pydub是一個(gè)基于ffmpeg的Python音頻處理模塊,封裝了許多ffmpeg底層接口,因此用它來(lái)做音樂(lè)歌曲文件格式轉(zhuǎn)換會(huì)非常方便。今天給大家介紹它的音樂(lè)文件格式轉(zhuǎn)換功能,幾乎支持所有音樂(lè)音頻格式,需要的可以參考一下2022-06-06
基于Python開(kāi)發(fā)PPT圖片提取與合并工具
在日常工作中,我們經(jīng)常需要處理PPT中的圖片,本文將介紹如何使用Python開(kāi)發(fā)一個(gè)圖形界面工具,實(shí)現(xiàn)PPT圖片提取和九宮格合并功能,需要的可以參考下2024-12-12
python利用scatter繪畫(huà)散點(diǎn)圖
這篇文章主要介紹了python利用scatter繪畫(huà)散點(diǎn)圖,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下,希望對(duì)你的學(xué)習(xí)有所幫助2022-06-06
python內(nèi)置模塊collections知識(shí)點(diǎn)總結(jié)
這篇文章主要介紹了python內(nèi)置模塊collections知識(shí)點(diǎn)總結(jié),有興趣的朋友們學(xué)習(xí)下。2019-12-12
2025最新版Python3.13.1安裝使用指南(超詳細(xì))
Python編程語(yǔ)言自誕生以來(lái),已經(jīng)成為全球最受歡迎的編程語(yǔ)言之一,它簡(jiǎn)單易學(xué)易用,以標(biāo)準(zhǔn)庫(kù)和功能強(qiáng)大且廣泛外 掛的擴(kuò)展庫(kù),為用戶提供包羅萬(wàn)象、強(qiáng)大全面的功能,此次給大家介紹了2025年最新版Python 3.13.1安裝使用指南全面更新,需要的朋友可以參考下2025-03-03
pandas之分組groupby()的使用整理與總結(jié)
這篇文章主要介紹了pandas之分組groupby()的使用整理與總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Python導(dǎo)入Excel表格數(shù)據(jù)并以字典dict格式保存的操作方法
本文介紹基于Python語(yǔ)言,將一個(gè)Excel表格文件中的數(shù)據(jù)導(dǎo)入到Python中,并將其通過(guò)字典格式來(lái)存儲(chǔ)的方法,感興趣的朋友一起看看吧2023-01-01

