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

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

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

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

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

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

 ```javascript: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文の文法をおさらいしておこう！

```javascript
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”などを指定する


```:ex
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で取得したもの)
```

```python: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.`というエラーが出てしまうので辞書型を使って記載する

```python
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からアクセストークンが取得できるはず、、、