新浪微博登录

### Django + vue实现新浪微博登陆

>新浪微博开放平台：https：//open.weibo.com/

####一，准备工作

-#####注册新浪微博账号

-#####登录微博开放平台：https：//open.weibo.com

-#####进入首页。创建网站接入的应用

！[]（微博登陆\网站接入.png）

-#####选择立即插入，进入到创建应用页面

！[]（微博登陆\立即加入.png）

-#####创建应用

！[]（微博登陆\创建应用.png）

-#####基本信息页面

！[]（微博登陆\基本信息页面.png）

-#####高级信息页面

！[]（微博登陆\高级信息页面.png）

###二，接口调用

-#####查看接口文档

！[]（微博登陆\文档oauth认证.png）

！[]（微博登陆\接口文档.png）

-OAuth2.0授权认证

| 接口| 说明|
| -------------------------------------------------- ---------- | ----------------------------- |
| [OAuth2 / authorize]（https://open.weibo.com/wiki/Oauth2/authorize）| 请求用户授权令牌|
| [OAuth2 / access_token]（https://open.weibo.com/wiki/Oauth2/access_token）| 获取授权过的访问令牌，UID |

###三，接口的使用

##### 3.1OAuth2 / authorize：生成超链接，转移到微博，用户登录

vue
//拼接超链接
网址：“ https://api.weibo.com/oauth2/authorize?client_id=792720875&redirect_uri=http://127.0.0.1:8080/microblog_callback”
 
```

3.1.1超链接在vue中使用，登陆页面（Login.vue）

vue
<模板>
    <div>
        <form action =“”>
            <p> <input type =“ text” placeholder =“用户名” v-model =“ username”> </ p>
            <p> <input type =“ password”占位符=“密码” v-model =“ passwd”> </ p>
            <p> <input type =“ submit” value =“登陆”> <a :href="url"> <img src =“ / static / l_2_h.png”>微博登陆</a> </ p>
        </ form>
    </ div>
</ template>

<脚本>
导出默认值{
    data（）{
        返回{
            网址：“ https://api.weibo.com/oauth2/authorize?client_id=792720875&redirect_uri=http://127.0.0.1:8080/microblog_callback”，

        }
    }
}
</ script>
```

3.1.2微博登陆需要某些页面，所以需要新建放置页面（MicroblogCallback.vue）

vue
<模板>
    <div>
        登陆中。。。
    </ div>
</ template>

<脚本>
从‘axios‘导入axios
导出默认值{
    data（）{
        返回{
            代码：“”
        }
    }，
    Mounted（）{//钩子函数，当替换到该页面时，自动执行该函数内的所有代码
        this.code = this。$ route.query.code //获取微博用户授权以后的代码值
        console.log（this.code）
    }
}
</ script>
```

3.1.3vue中路由设置router下index.js

vue
从“ vue”导入Vue
从“ vue-router”导入路由器

从“ @ / components / Login”导入登录
从‘@ / components / MicroblogCallback‘导入MicroblogCallback

Vue.use（路由器）

导出默认的新路由器（{
  模式：“历史”，
  路线：[
    
    {
      路径：“ /”，
      名称：“登录”，
      组件：登录
    }，
    {
      路径：“ / microblog_callback”，
      名称：“ MicroblogCallback”，
      组件：MicroblogCallback
    }
  ]
}）

```

**获取到了代码值，使用代码值通过另外一个接口，获取uid **

##### 3.2OAuth2 / access_token，获取Uid（微博账号在新浪中的用户id）

| A | 必选| 类型及范围| 说明|
| ------------- | ---- | ---------- | ------------------------------------------ |
| client_id | 真实| 字符串 申请应用时分配的AppKey。
| client_secret | 真实| 字符串 申请应用时分配的AppSecret。
| grant_type | 真实| 字符串 请求的类型，填写authorization_code |
| 代码 真实| 字符串 调用authorize获得的代码值。
| redirect_uri | 真实| 字符串 某些地址，需需与注册应用里的某些地址一致。|

vue
＃界面返回值---官方示例

 {
       “ access_token”：“ ACCESS_TOKEN”，
       “ expires_in”：1234，
       “ remind_in”：“ 798114”，
       “ uid”：“ 12341234”
 }
```

3.2.1django后台逻辑，通过获取到的代码值，来获取用户的uid

-vue发送代码值到实际，MicroblogCallback.vue下装函数

  vue
  Mounted（）{
          this.code = this。$ route.query.code
          console.log（this.code）
          让form_data = new FormData（）
          form_data.append（“ code”，this.code）
          axios（{
              网址：“ http://127.0.0.1:8000/microblog/acquire_uid/”，
              方法：“发布”，
              数据：form_data
          }）。then（res => {
              if（res.data.code == 200）{
                  //获取到了用户的uid，用户替换到首页
                  window.location.href =“ / index”
              }其他{
                  //如果没有获取到用户的uid，返回到登陆页面
                  window.location.href =“ /”
              }
          }）
      }
  ```

-后台逻辑

  python
  从django.shortcuts导入渲染
  从django.views导入视图
  从django.http导入JsonResponse
  从django.conf导入设置
  汇入要求
  
  从其危险的导入TimedJSONWebSignatureSerializer
  ＃在这里创建您的视图。
  
  serializer = TimedJSONWebSignatureSerializer（settings.SECRET_KEY，1800）
  
  
  AcquireUidView（View）类：
      “”
      通过代码以OAuth2 / access_token的方式来获取uid
      “”
      def post（自我，要求）：
          代码= request.POST.get（“代码”，“”）
          如果代码：＃判断获取到的代码不为空
              ＃整理访问OAuth2 / access_token接口需要的参数
              ＃参数，https：//open.weibo.com/wiki/Oauth2/access_token，具体参数含义，实质上该接口文档
              url =“ https://api.weibo.com/oauth2/access_token”
              参数= {
                  “ client_id”：“ 792720875”，
                  “ client_secret”：“ 3c42d257cb819b14459aca26ce66f6bc”，
                  “ grant_type”：“授权码”，
                  “代码”：代码，
                  “ redirect_uri”：“ http://127.0.0.1:8080/weibo_callback”
              }
  
              ＃使用requests库来获取接口数据
              RES = requests.post（URL = URL，数据=参数）
              json_info = res.json（）
              uid = json_info.get（“ uid”）
              令牌= serializer.dumps（{“ uid”：uid}）。decode（）
              return JsonResponse（{“ code”：200，“ msg”：“ OK”，“ token”：token}，
                                  safe = False，json_dumps_params = {“ ensure_ascii”：False}）
          其他：
              return JsonResponse（{“ code”：400，“ msg”：“授权登陆失败”}，
                                  safe = False，json_dumps_params = {“ ensure_ascii”：False}）
  
  ```

###四，微博绑定

将本地用户，与微博的uid绑定

-创建微博绑定表：uid（微博id），user（用户外键），type（三方类型）
-请求：获取uid；响应：返回uid
-vue创建微博绑定的页面（与注册页类似）。提交时间：用户名，密码，uid。
-django接口，将用户名，密码，写入到用户表。将uid写入微博绑定表
-django接口返回：登录成功，用户的Id