如何使用Django和Taro实现企业微信登录的前后端分离项目？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1215个文字，预计阅读时间需要5分钟。
前言：最近完成的一个小项目，后端使用Django搭建RestFramework接口，前端初次尝试使用京东开源的Taro框架做多端（目前需要用于企业微信的H5端和微信小程序）。
前言还是最近在做的一个小项目，后端用的是Django搭配RestFramework做接口，前端第一次尝试用京东开源的Taro框架来做多端（目前需要做用于企业微信的H5端和微信小程序）
本文记录一下企业微信登录的流程，上周看文档看得头晕晕的，其实很简单，封装好了就几行代码的事~
两种方式- 一种是先拼接好登录要用的地址
authorize_url，回调地址设置成h5应用的网页入口，然后把authorize_url设置为企业微信里的应用主页就行，然后直接提取链接里的code - 另一种是在应用里拼接
authorize_url地址，回调地址同样设置成h5应用的网页入口，然后应用里去请求authorize_url，然后提取链接里的code用来登录就行
说是两种，其实流程都是一样的，只不过第一种少去了前端拼接authorize_url以及首次请求的操作，为了方便起见，本文推荐使用第一种
假设前端地址是xxx.com，那么我们用后端生成的企业微信登录地址中会把前端地址作为回调地址传入，在企业微信中访问登录地址之后，回跳转到我们的前端地址，并在路径中附上参数code，形式如下：
xxx.com?code=dkwawen123j13bk1
所以前端要做的就是拿到这串code，并提交给后端，让后端拿code去微信服务器换用户信息，就这样~
后端代码企业微信登录的接口已经集成在我的「DjangoStarter」项目模板中，可以直接食用~
后端使用的是wechatpy这个库，非常好用，封装了微信开发的常用功能~
下面写一下两个关键的方法
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):
"""微信企业号相关认证服务"""
client = WeChatClient(
settings.WECHAT_WORK_CONFIG['CORP_ID'],
settings.WECHAT_WORK_CONFIG['SECRET'],
)
@swagger_auto_schema(operation_summary='获取微信企业号登录链接')
@action(detail=False)
def get_authorize_url(self, request):
return Response({
# todo 这里要写上前端应用入口地址
'url': self.client.oauth.authorize_url('xxx.com')
})
@swagger_auto_schema(
operation_summary='通过code登录',
manual_parameters=[
openapi.Parameter(
name='code', in_=openapi.IN_QUERY,
description='从微信企业号服务器获取到的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登录状态
login(request, user_obj)
# 生成drf token
token, created = Token.objects.get_or_create(user=user_obj)
return Response({
'user': UserSerializer(user_obj).data,
'user_info': user_info,
'successful': True,
'is_created_user': is_created_user,
'token': token.key,
'message': '企业微信登录成功',
})
写完接口配置一下路由（这里就不重复了）
然后请求这个get_authorize_url接口，得到一个地址
{
"message": "请求成功",
"code": 200,
"data": {
"url": "open.weixin.qq.com/connect/oauth2/authorize?appid=wx386...&redirect_uri=xxx.com，那么得到的企业微信登录地址就是
open.weixin.qq.com/connect/oauth2/authorize?appid=wx386...&redirect_uri=xxx.com/#/pages/index/index?code=abc
但人家微信登录回调跳转的地址形式是这样
xxx.com?code=abc&state=#/pages/index/index
这根本就拿不到code啊 o(´^｀)o
所以得自己用js封装一个
直接上代码了
// 解析微信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
}
使用的时候
let code = getCodeFromUrl(window.location.href)
就可以拿到code了
code都有了，后面就不用多说了~
参考资料- wechatpy库文档：docs.wechatpy.org/zh_CN/stable/oauth.html#id4
- 企业微信文档：developer.work.weixin.qq.com/document/path/91335
- Taro框架文档：taro-docs.jd.com/taro/docs/router
本文共计1215个文字，预计阅读时间需要5分钟。
前言：最近完成的一个小项目，后端使用Django搭建RestFramework接口，前端初次尝试使用京东开源的Taro框架做多端（目前需要用于企业微信的H5端和微信小程序）。
前言还是最近在做的一个小项目，后端用的是Django搭配RestFramework做接口，前端第一次尝试用京东开源的Taro框架来做多端（目前需要做用于企业微信的H5端和微信小程序）
本文记录一下企业微信登录的流程，上周看文档看得头晕晕的，其实很简单，封装好了就几行代码的事~
两种方式- 一种是先拼接好登录要用的地址
authorize_url，回调地址设置成h5应用的网页入口，然后把authorize_url设置为企业微信里的应用主页就行，然后直接提取链接里的code - 另一种是在应用里拼接
authorize_url地址，回调地址同样设置成h5应用的网页入口，然后应用里去请求authorize_url，然后提取链接里的code用来登录就行
说是两种，其实流程都是一样的，只不过第一种少去了前端拼接authorize_url以及首次请求的操作，为了方便起见，本文推荐使用第一种
假设前端地址是xxx.com，那么我们用后端生成的企业微信登录地址中会把前端地址作为回调地址传入，在企业微信中访问登录地址之后，回跳转到我们的前端地址，并在路径中附上参数code，形式如下：
xxx.com?code=dkwawen123j13bk1
所以前端要做的就是拿到这串code，并提交给后端，让后端拿code去微信服务器换用户信息，就这样~
后端代码企业微信登录的接口已经集成在我的「DjangoStarter」项目模板中，可以直接食用~
后端使用的是wechatpy这个库，非常好用，封装了微信开发的常用功能~
下面写一下两个关键的方法
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):
"""微信企业号相关认证服务"""
client = WeChatClient(
settings.WECHAT_WORK_CONFIG['CORP_ID'],
settings.WECHAT_WORK_CONFIG['SECRET'],
)
@swagger_auto_schema(operation_summary='获取微信企业号登录链接')
@action(detail=False)
def get_authorize_url(self, request):
return Response({
# todo 这里要写上前端应用入口地址
'url': self.client.oauth.authorize_url('xxx.com')
})
@swagger_auto_schema(
operation_summary='通过code登录',
manual_parameters=[
openapi.Parameter(
name='code', in_=openapi.IN_QUERY,
description='从微信企业号服务器获取到的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登录状态
login(request, user_obj)
# 生成drf token
token, created = Token.objects.get_or_create(user=user_obj)
return Response({
'user': UserSerializer(user_obj).data,
'user_info': user_info,
'successful': True,
'is_created_user': is_created_user,
'token': token.key,
'message': '企业微信登录成功',
})
写完接口配置一下路由（这里就不重复了）
然后请求这个get_authorize_url接口，得到一个地址
{
"message": "请求成功",
"code": 200,
"data": {
"url": "open.weixin.qq.com/connect/oauth2/authorize?appid=wx386...&redirect_uri=xxx.com，那么得到的企业微信登录地址就是
open.weixin.qq.com/connect/oauth2/authorize?appid=wx386...&redirect_uri=xxx.com/#/pages/index/index?code=abc
但人家微信登录回调跳转的地址形式是这样
xxx.com?code=abc&state=#/pages/index/index
这根本就拿不到code啊 o(´^｀)o
所以得自己用js封装一个
直接上代码了
// 解析微信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
}
使用的时候
let code = getCodeFromUrl(window.location.href)
就可以拿到code了
code都有了，后面就不用多说了~
参考资料- wechatpy库文档：docs.wechatpy.org/zh_CN/stable/oauth.html#id4
- 企业微信文档：developer.work.weixin.qq.com/document/path/91335
- Taro框架文档：taro-docs.jd.com/taro/docs/router