### 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