Laravel

인스타그램 API 연동

짱구를왜말려? 2021. 2. 5. 15:06
반응형
SMALL

# What?

인스타그램 계정연동해놓고 장기로그인 시켜놓기

 

# How?

1. 기본세팅

- 인스타그램 계정 생성

 

- 앱으로 로그인하여 우측 상단 단축메뉴 > 설정 > 프로페셔널 계정으로 전환(크리에이터로 설정하면 안되고 꼭 비즈니스로 해야됨!)

 

- 페이스북에 로그인하여 페이지 생성 -> 페이지 설정 -> Instagram -> 만들었던 계정 연동

 

- 페이스북 개발자센터 접속

developers.facebook.com

 

- 앱 생성

 

- 제품에 Facebook Login 추가

1) 기본정보 입력(사이트 url https만 됨, 그렇다고 로컬 테스트가 안되는건 아님)

* 테스트할 때는 url들 유효하지 않아도 됨 걱정 x

2) 제품 > Facebook 로그인 > 설정 -> 유효한 OAuth 리디렉션 URI 입력

3) 설정 > 기본 설정 앱 ID, 앱 시크릿 코드 확인하여 본인 개발 환경값 세팅에 넣어놓기

 

@ .env

INSTAGRAM_APP_ID=
INSTAGRAM_APP_SECRET=

 

- 앱 검수 > 권한 및 기능 > 아래 목록 권한 추가(실제 배포할 때는 요청 후 검수도 받아야 쓸 수 있음)

- instagram_basic

- pages_show_list

- ads_management
- business_management
- instagram_content_publish
- pages_read_engagement

2. 비즈니스 계정 권한 얻기

=> 페이스북 로그인 > 페이지 목록 얻기 > 내가 작업하고 싶은 페이지의 access_token으로 해당 페이지랑 연동된 인스타그램 비즈니스 계정 활용하기

 

* 로그인시에 instagram_basic, pages_show_list 권한 요청해야함

@ welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
    </head>
    <body>
        <button onclick="login()">로그인</button>
    </body>
    <script>
        window.fbAsyncInit = function() {
            FB.init({
                appId            : '908351166590535',
                autoLogAppEvents : true,
                xfbml            : true,
                version          : 'v9.0'
            });
        };

        let account;

        function login(){
            // 1. 로그인
            FB.login(function(response) {

                // 2. 페이스북 계정 페이지 목록 가져오기
                axios.get("https://graph.facebook.com/v9.0/me/accounts?access_token=EAAM6IZCydrkcBACeBUv4SDZB13CDZAG9ZAwi9CAY5gwrvnEFb8uMK845sQ99LHcj7dbZBYosIN82cY6HZAQsqQB8v18u2rNwzC3tDvvJb8eBkvMMVza6jYu1sML6zLBOJgKZA9dOXZBwSpnZCVuHgYiLSObkq4xtOO64EpRuODB4rqLOJD43qEH5AJbcIo7o1s7ZASGxkYaFWqRAZDZD", {
                    params: {
                        access_token: response.authResponse.accessToken
                    }
                }).then(response => {
                    // 일단 첫번째 페이지로 테스트한거고, 실제로는 선택한 페이지의 access_token을 가져와야겠지?
                    let firstPage = response.data.data[0];

                    // 3. 내 인스타 비즈니스 계정이랑 연동된 페이지의 access_token으로 비즈니스 계정정보 얻기
                    axios.get(`https://graph.facebook.com/v9.0/${firstPage.id}`, {
                        params: {
                            fields: "instagram_business_account",
                            access_token: firstPage.access_token
                        }
                    }).then(response => {
                        account = response.data.instagram_business_account;
                    })
                })
            }, {scope: "instagram_basic, pages_show_list"})
        }
    </script>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

</html>
LIST