zoukankan      html  css  js  c++  java
  • 前后端联调,生成微博回调接口(上)

    1.微博回调接口

    1.1 oauth/urls.py 中添加路由

    urlpatterns = [ 
          path('weibo/callback/', views.OauthWeiboCallback.as_view()), # /oauth/weibo/callback/ 
    ]
    

    1.2 oauth/views.py 中添加试图函数

    http://192.168.56.100:8888/oauth/weibo/callback/
    
    from apps.oauth.models import OauthUser
    from rest_framework_jwt.serializers import jwt_payload_handler,jwt_encode_handler
    from user.utils import jwt_response_payload_handler
    
    
    # 通过vue前端传入的code,微博身份验证
    class OauthWeiboCallback(APIView):
        # 自定义权限类
        permission_classes = (AllowAny,)
    
        def post(self, request):
            # 接收vue端传过来的code(微博的用户code) 
            # 1.使用微博用户code+微博开发者账号信息换取微博的认证access_token
            code = request.data.get('code')
            data = {
                'client_id': '自己微博的 APP key',
                'client_secret': '自己微博的 secret',
                'grant_type': 'authorization_code',
                'code': code,
                'redirect_uri': 'http://127.0.0.1:8888/oauth/callback/',
            }
            url = 'https://api.weibo.com/oauth2/access_token'
            data = requests.post(url=url,data=data).json()   # 拿取请求的返回结果
            access_token = data.get('uid')  # 获取到的微博token
            weibo_uid = data.get('access_token')  # 获取到少码用户的id
    
            # 2. 根据uid 查询绑定情况
            try:
                oauth_user = OauthUser.objects.get(uid=weibo_uid, oauth_type='1')
            except Exception as e:
                oauth_user = None
            # 返回动作, 登录成功/需要绑定用户 type 0 登录成功, 1, 授权成功, 需要绑定
            if oauth_user:
                # 4. 如果绑定了, 返回token, 登录成功
                user = oauth_user.user
                payload = jwt_payload_handler(user)  # 获取用户信息载荷部分
                token = jwt_encode_handler(payload)   # 将获取的用户信息加密成jwt
                # jwt_response_payload_handler为user模块定义的jwt返回的信息
                data = jwt_response_payload_handler(token, user)
                data['type'] = '0'  # 指定为登录成功
                return Response({'code': 0, 'msg': '登录成功', 'data': data})
            else:
                # 5. 如果没绑定, 返回标志, 让前端跳转到绑定页面
                return Response({'code': 0, 'msg': '授权成功', 'data': {'type': '1', 'uid': weibo_uid}})
    

    1.3 oauth/models.py 中添加用户绑定模型

    # 把三方的用户信息,和本地的用户信息进行绑定
    class OauthUser(models.Model):
        OAUTHTYPE = (
            ('1','weibo'),
            ('2','weixin'),
        )
        uid = models.CharField('三方用户id',max_length=64)    # 第三方用户id
        user = models.ForeignKey('user.User', on_delete=models.CASCADE)  # 本地用户外键,关联User表
        oauth_type = models.CharField('认证类型',max_length=10, choices=OAUTHTYPE)
    
    

    1.4 迁移数据库

    python manager.py makemigrations 
    python manager.py migrate
    

    2.vue微博回调空页面

    • 注:微博回调空页面为:
    http://127.0.0.1:8888/oauth/callback/
    

    2.1 页面路径 componentsoauth.vue

    <template>
      <div>
        <div v-show='visiable'>
          绑定用户
          用户名: <input
          type="text"
          v-model="username"
          @blur="check_username"
        >
          <span>{{username_message}}</span>
          密码: <input
          type="password"
          v-model="password"
        >
          <button @click="bindUser">绑定</button>
        </div>
      </div>
    </template>
    <script>
      import { oauth_callback_post, oauth_binduser_post, user_count } from './axios_api/api'
      export default {
        data() {
          return {
            visiable: false, // 绑定用户窗口
            uid: '', // weibo_uid
            username: '',
            password: '',
            username_message: '',
            username_error: false
          }
        },
        mounted() {
          this.getCode()
        },
        methods: {
          // 判断用户名
          check_username() {
            console.log('判断用户名')
            console.log(this.username == '')
            var reg = new RegExp(/^[a-zA-Z0-9_-]{4,16}$/); //字符串正则表达式 4到14位(字母,数字,下划线,减号)
            if (this.username == '') {
              this.username_message = '用户名不能为空'
              this.username_error = true
              return false
            }
            if (!reg.test(this.username)) {
              this.username_message = '用户名格式不正确'
              this.username_error = true
              return false
            } else {
              // 去后端检查用户名使用数量
              user_count({ type: 'username', data: this.username }).then((res) => {
                console.log(res)
                if (res.data.count > 0) {
                  this.username_message = '用户名已存在, 请输入密码'
                  this.username_error = false
                } else {
                  this.username_message = '用户名可用, 将创建新用户,请输入密码'
                  this.username_error = false
                }
              })
            }
          },
          // 扫码判断绑定没有
          // 获取微博传过来的code,发送给django后端进行验证
          getCode() {
            // 获取url中的code 信息
            // 当前url 是  http://mysyl.com:8080/oauth/callback/?code=fe6cbe07708aecf4a2b3d942ed692c4c
            let code = this.$route.query.code
            console.log(this.$route.query)
            // 给后端发送code
            let params = { code: code }
            oauth_callback_post(params).then((resp) => {
              console.log(resp)
              // code: 0
              // msg: "授权成功"
              // data: {type: "1", uid: "7410919278"}
              if (resp.data.type == '0') {
                // code: 0
                // msg: "登录成功"
                // data: {
                // authenticated: "true"
                // email: ""
                // id: 1
                // name: "admin"
                // role: null
                // token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNTk3OTAwNTcyLCJlbWFpbCI6IiIsIm9yaWdfaWF0IjoxNTk3ODE0MTcyfQ.aQT7GSR_xQBPMlB4_k8-zTHnx0ow3OC2KHa3C8MgilY"
                // type: "0"
                // username: "admin"}
                // 发送  用户名, 密码, weibo_uid 到后端接口, 进行绑定
                let res = resp.data
                localStorage.setItem('username', res.username)
                // localStorage.setItem('img', res.img)
                localStorage.setItem('token', res.token)
                localStorage.setItem('uid', res.id)
                this.login_username = res.username
                this.opened = false
                // alert(res.message)
                this.$router.push('/')
    
              }
              if (resp.data.type == '1') {
                this.visiable = true
                this.uid = resp.data.uid
              }
            })
          },
          // 点击绑定以后判断用户存在不存在
          bindUser() {
            if(this.username_error){
              return
            }
            // 发送  用户名, 密码, weibo_uid 到后端接口, 进行绑定
            let params = { username: this.username, password: this.password, weibo_uid: this.uid }
            oauth_binduser_post(params).then((resp) => {
              console.log(resp)
              if (resp.code == 0){
                // 获取用户是否存在
                let res = resp.data
                localStorage.setItem('username', res.username)
                // localStorage.setItem('img', res.img)
                localStorage.setItem('token', res.token)
                localStorage.setItem('uid', res.id)
                this.login_username = res.username
                this.opened = false
                // alert(res.message)
                this.$router.push('/')
              }else {
                alert('密码错误')
              }
            })
          }
        }
      }
    </script>
    
    
    
  • 相关阅读:
    PAT 解题报告 1009. Product of Polynomials (25)
    PAT 解题报告 1007. Maximum Subsequence Sum (25)
    PAT 解题报告 1003. Emergency (25)
    PAT 解题报告 1004. Counting Leaves (30)
    【转】DataSource高级应用
    tomcat下jndi配置
    java中DriverManager跟DataSource获取getConnection有什么不同?
    理解JDBC和JNDI
    JDBC
    Dive into python 实例学python (2) —— 自省,apihelper
  • 原文地址:https://www.cnblogs.com/Beginner-Y/p/13787440.html
Copyright © 2011-2022 走看看