오늘 할 일
・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 개발자용의 서비스입니다. 웹 앱 개발 중 어떤 요청이 전송되고 있는지 확인하고 싶을 때 이용하면 편리합니다.

Messaging API 설정의 웹 후크 설정을 입력한 다음 사용 버튼을 켭니다.

그런 다음 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를 저장할 수 있도록 설정합니다.