vue.jsとdjangoでアカウントを自動生成　 #Django

１.API上で手動でfb_codeをポストしてアカウントを作る

2.vue.jsのaxiosを使ってプロントエンド側でポストできるようにする

ここでは２について詳しく述べていきたい。

やること
1.vue routerとaxiosを使ってurlからcodeの値を取得する
2.取得したcodeを利用してアクセストークンを取得する
3.アクセストークンからfbの情報を取得する

1.vue routeを使ってurlからcodeの値を取得する

FBButton.vue

<script>
import axios from 'axios'
export default {
    name: 'FBButton',
    methods: {
        open() {
            document.location.href = 'https://www.facebook.com/v9.0/dialog/oauth?client_id={app_id}&redirect_uri=https://localhost:8080&state=123'
        }
    },
    data(){
        return {
        info:null
    }
}, mounted (){
　　　#codeにvue routeで取得した値を入れる
    let code = this.$route.query.code
   #if文でもしcodeがあればaccessTokenUrlを取得して
    if(code){
        let data = {fb_token: code}
        axios
        .post('http://127.0.0.1:8000/accounts/', data)
        .then(response => (this.info = response.data))
        }
    }
}

</script>

ここでjsのif文の文法をおさらいしておこう！

if (条件式) {
    条件式が成り立った場合処理を実行
}else{
    条件式が成り立たなければ処理を実行
}

if文では、()内の条件式が成り立つ場合に{}内の処理が実行されます。if文に付け加えることで、条件式が成り立たない場合の処理も書くことができます。

おそらくここまできてFBButtonをクリックするとMalformed access tokenというエラーが出る。これはcodeを使ってアクセストークンをまだ取得できていないため。
（エラーの確認方法：検証→network→赤くなっている文字を確認する）

2.access_tokenに接続してaccess_tokenを取得する

ただしフロントエンド側のコードに個人情報を直接記載するのはセキュリティー上危険なのでバックエンドのpythonに記載する。

ここでJSではHTTP requestをするときにaxiosを使っていたがPythonではrequestsモジュールを使う必要があるのでインストールする

Requestsモジュールとは

Requestsは、 Python の HTTP 通信ライブラリです。 Requests を使うとWebサイトの情報取得や画像の収集などを簡単に行うことができます。Python には標準で urllib というライブラリが存在しますが、 Requests はそれよりもシンプルに、人が見て分かりやすくプログラムを記述することができます。

requestsモジュールの使い方

Requests ライブラリをインストールする
インストールコマンドはpip install requestsです

pip install requests

Requests の利用方法は以下の通り

requests.request(method, url, オプション)

methodには”get”や”post”などを指定する

requests.get(url,オプション)
requests.post(url,オプション)
requests.put(url,オプション)
requests.delete(url,オプション)
requests.head(url,オプション)
requests.options(url,オプション)

今やりたいこと
codeを使ってアクセストークンを取得する

とりあえず、新しいファイルを作ってpython上でcodeからアクセストークンを取れるようにコードを書いていく

エンドポイント：
https://graph.facebook.com/oauth/access_token

パラメータ：
client_id: facebookアプリのAppID
client_secret: facebookアプリのSecret
redirect_url: 認証後のリダイレクトURL。設定したドメインでないとエラーになる。
code: oauthで取得したCode

https://www.facebook.com/v9.0/dialog/oauth/access_token
  client_id={app-id}
  &redirect_uri={redirect-uri}
  &code=code(vue.jsで取得したもの)

url.py

import requests

parameter = "codeの値"

url =  "https://www.facebook.com/v9.0/dialog/oauth/access_token?
  client_id={app-id}
  &redirect_uri={redirect-uri}
  &code=" + parameter
   #redirect_uriはvue.jsで記載したリダイレクトURIにしておく

 r = requests.get(url)
 print(r.json())

このままだとerror validating verification code.というエラーが出てしまうので辞書型を使って記載する

import requests

parameter = "codeの値"

url =  "https://www.facebook.com/v9.0/dialog/oauth/access_token?"

params = {
    'client_id': '{client_id}',
    'redirect_uri': '{redirect_uri}',
    'client_secret': '{client_secret}',
    'code': parameter
}

 r = requests.get(url, params=params)

 print(r.json())

これでまだ`Error validating verification code.`のエラーが出てしまう場合

facebook developerツールの有効なOAuthリダイレクトURIがきちんと登録されているか確認する。
(FBダッシュボード→マイアプリ→Facebookログイン→設定)

これで無事にcodeからアクセストークンが取得できるはず、、、

vue.jsとdjangoでアカウントを自動生成