今日やること
・　Line apiを使い倒す
・　LineのUser＿idをrouterを使って取得してデータベースに保存する。

#1.LINE Developersコンソールでチャネルを作成する
LINE Developersから新しいチャンネルを作成し、

公式ドキュメントの方針に従って登録を進める。

#2. Messaging API設定からWebhook URLの設定を行う
Lineのチャンネルの作成が終わったら次にWehook URLを設定していく。

Web hoookとは？

LINEプラットフォームから送信されたWebhookイベントを処理できるボットサーバーのエンドポイントのURLです。設定したURLがWebhookイベントを受け取るできることを確認するには「検証」ボタンをクリックします。

ここではテスト用としてrequest binをWeb hookとして設定する。

request binとはいろいろなHTTPリスエストを記録し、人間に読みやすい形で表示してくれるweb開発者向けのサービスです。Webアプリ開発中、どういうリクエストが送信されているのかを確認したい時に利用すれば便利です。

Messaging API設定のWeb hookの設定を入力してから利用のボタンをオンにしよう。

次にrequestbinのURLをリフレッシュする。

この写真が表示されれば成功！

#プッシュメッセージの送信
アカウント追加したユーザーに対してプッシュメッセージを送信できるようにする。詳しくはこちらから参照できる。

まずは下記をインストールする。

pip install line-bot-sdk

次にコードをを書いていく

from linebot import LineBotApi
from linebot.models import TextSendMessage
from linebot.exceptions import LineBotApiError

line_bot_api = LineBotApi('<channel access token>')

try:
    line_bot_api.push_message('<to>', TextSendMessage(text='Hello World!'))
except LineBotApiError as e:
    # error handle
    ...

channel access token:　長期アクセストークンを入力

to: メッセージを送信する相手のline user idを入力（request binで取得可）

それぞれの情報を入力したのちコードを実行するとHello World!というメッセージが公式ラインのアカウントより送信されてきていると思う。

ここは入力ミスが起こりやすいのでしっかり確認しよう。

#クエリーパラメーターの設定
ここから話はガラッと変わってvuejsでlineのUser idを設定してそこからパラメーターを取得する。

クエリーを設定して取得する手順は以下の通りである。

routeを使って変数にクエリの値を入れる。
設定したuserIdをaxiosを使って送信

####1.userIdを設定する

IGButton.vue

    methods: {
        open() {
+          const userId = this.$route.query.user_id
+            document.location.href = `https://api.instagram.com/oauth/authorize?client_id=909807339845904&redirect_uri=${process.env.VUE_APP_IG_REDIRECT_URL}&scope=user_profile%2Cuser_media&response_type=code&state=${userId}`
        }
    }

#2.設定したuserIdをaxiosを使って送信

Insta.vue

    mounted () {
      let code = this.$route.query.code
+      let userId = this.$route.query.state
      console.log(userId)
      let redirect_uri = process.env.VUE_APP_IG_REDIRECT_URL
      if(code){
+        let data = {ig_code: code, redirect_uri: redirect_uri, line_user_id: userId}
        axios
        .post('/accounts/',data)
        .then(resp => {
          this.info = resp.data
            console.log(resp.data)
            this.$store.commit('setAccount', resp.data)
            axios.defaults.headers.common['Authorization'] = 'Token ' + resp.data.token
            localStorage.setItem("account", JSON.stringify(resp.data))
            this.$router.push('/profile/')

今日はここまで。

#今日の課題

djangoにline_user_idフィールドを追加してdjango上でline user idを保存できるように設定する。