前后端联调，生成微博授权URL接口

1.创建apps/oauth模块进行oauth认证

'''2.1 在apps文件夹下新建应用： oauth''' 

cd syl/apps 

python ../manage.py startapp oauth # 切换到apps文件夹下执行创建命令 

'''2.2 添加子路由： oauth/urls.py''' 

from django.urls import path 

from . import views 

urlpatterns = [ 

]

'''2.3 在syl/settings.py中添加应用''' 

INSTALLED_APPS = [ 

​		'oauth.apps.OauthConfig', 

]

'''2.4 在syl/urls.py主路由中添加''' 

urlpatterns = [ 

​		path('oauth/', include('oauth.urls')), 

]

2.生成微博授权URL接口

1.1 添加子路由： oauth/urls.py

urlpatterns = [ 
     path('weibo/', views.WeiboUrl.as_view()), # /oauth/weibo/ 返回微博登录地址 
]

1.2 syl/settings.py 中配微博地址

1.2 视图函数: oauth/views.py

from rest_framework.permissions import AllowAny
from rest_framework.response import Response
from rest_framework.views import APIView
from urllib.parse import urlencode

# 生成前端跳转到微博扫码页面的url
class WeiboUrl(APIView):
    '''
    生成微博的登陆页面路由地址
    https://api.weibo.com/oauth2/authorize?   # 微博oauth认证地址
    client_id=app key3&     # 注册开发者id
    response_type=code&
    redirect_uri=http://127.0.0.1:8888/oauth/callback/ # 获取code后将code回 调给后端地址
    '''

    # 自定义权限类
    permission_classes = (AllowAny,)

    def post(self, request):
        url = 'https://api.weibo.com/oauth2/authorize?'   # 微博授权的 url地址
        data = {
            'client_id': '自己微博的app key',     # 微博　App Key
            'response_type': 'code',
            'redirect_uri': '设置回调地址', # VUE的回 调，微博后台授权的回调地址
        }
        weibo_url = url + urlencode(data)
        # https://api.weibo.com/oauth2/authorize? client_id=1234565&response_type=code&redirect_uri=http://127.0.0.1:8000/api/we ibo_back/
        # return Response({'weibo_url': weibo_url})
        return Response({'code': '0', 'msg': '成功', 'data': {'url': weibo_url}})

3.测试生成微博售前URL接口

• 测试接口获取新浪微博地址

http://192.168.56.100:8888/oauth/weibo/

• 在浏览器访问返回地址即可回到新浪扫码界面

https://api.weibo.com/oauth2/authorize? client_id=3516473472&response_type=code&redirect_uri=http%3A%2F%2F127.0.0.1%3A808 0%2Fweibo_callback

4.在Vue页面加载时动态发送请求获取微博授 权url

1.1 在 componentscommonlab_header.vue 中写oauth动态获取微 博授权URL

      // 获取微博登录地址 
      oauth() { 
​        // 从后端获取 微博登录地址 
        oauth_post().then((resp) => { 
          console.log(resp) 
	  //{'code': '0', 'msg': '成功', 'data': {'url': url}} 
​	  let url = resp.data.url; 
          this.weibo_url = url; 
​	}) 
}, 

1.2 在vue的mounted函数中调用获取微博授权url函数

  mounted() { 
      this.oauth() 
 },

1.3 点击"登录"弹出的form表单中加入url

<form 
  action="/login" 
  method="post" 
> 
  <div class="form-group widget-signin"> 
    <a :href="weibo_url"><i class="fa fa-weibo"></i></a> 
  </div> 
</form>