실제로 빌드해 봅시다!

Instagram으로 앱 등록

// Instagram OAuth 2 setup
const credentials = {
 client: {
   id: YOUR_INSTAGRAM_CLIENT_ID, // Change this!
   secret: YOUR_INSTAGRAM_CLIENT_SECRET, // Change this!
 },
 auth: {
   tokenHost: 'https://api.instagram.com',
   tokenPath: '/oauth/access_token'
 }
};
const oauth2 = require('simple-oauth2').create(credentials);

Instagram 인증 흐름 시작

app.get('/redirect', (req, res) => {
  // Generate a random state verification cookie.
  const state = req.cookies.state || crypto.randomBytes(20).toString('hex');
  // Allow unsecure cookies on localhost.
  const secureCookie = req.get('host').indexOf('localhost:') !== 0;
  res.cookie('state', state.toString(), {maxAge: 3600000, secure: secureCookie, httpOnly: true});
  const redirectUri = oauth2.authorizationCode.authorizeURL({
    redirect_uri: `${req.protocol}://${req.get('host')}/instagram-callback`,
    scope: 'basic',
    state: state
  });
  res.redirect(redirectUri);
});

function onSignInButtonClick() {
  // Open the Auth flow in a popup.
  window.open('/redirect', 'firebaseAuth', 'height=315,width=400');
};

액세스 토큰을 얻기 위한 승인 코드 교환

• 상태 쿠키가 상태 URL 쿼리 매개변수와 동일한지 확인하세요.
• 인증 코드를 교환하여 액세스 토큰을 얻고 Instagram에서 사용자 ID를 검색하세요.

app.get('/instagram-callback',(req, res) => {
  // Check that we received a State Cookie.
  if (!req.cookies.state) {
    res.status(400).send('State cookie not set or expired. Maybe you took too long to authorize. Please try again.');
  // Check the State Cookie is equal to the state parameter.
  } else if (req.cookies.state !== req.query.state) {
    res.status(400).send('State validation failed');
  }

  // Exchange the auth code for an access token.
  oauth2.authorizationCode.getToken({
    code: req.query.code,
    redirect_uri: `${req.protocol}://${req.get('host')}/instagram-callback`
  }).then(results => {
    // We have an Instagram access token and the user identity now.
    const accessToken = results.access_token;
    const instagramUserID = results.user.id;
    const profilePic = results.user.profile_picture;
    const userName = results.user.full_name;

    // ...

  });
});

app.get('/instagram-callback', (req, res) => {

    // ...

  }).then(results => {
    // We have an Instagram access token and the user identity now.
    const accessToken = results.access_token;
    const instagramUserID = results.user.id;
    const profilePic = results.user.profile_picture;
    const userName = results.user.full_name;
      
    // Create a Firebase custom auth token.
    const firebaseToken = createFirebaseToken(instagramUserID);

    // Serve an HTML page that signs the user in and updates the user profile.
    res.send(
        signInFirebaseTemplate(firebaseToken, userName, profilePic, accessToken)));
  });
});

맞춤 인증 토큰 생성

const firebase = require('firebase');
const serviceAccount = require('./service-account.json');
firebase.initializeApp({
  serviceAccount: serviceAccount
});

function createFirebaseToken(instagramID) {
  // The uid we'll assign to the user.
  const uid = `instagram:${instagramID}`;

  // Create the custom token.
  return firebase.auth().createCustomToken(uid);
}

맞춤 토큰을 사용하여 로그인

• 나중에 Instagram API에 액세스해야 하는 경우 Instagram 액세스 토큰을 실시간 데이터베이스에 저장합니다. (참고: 사용자만 읽을 수 있도록 하는 보안 규칙을 사용해야 합니다.)
• Firebase 사용자의 이름과 프로필 사진을 업데이트합니다.
• 사용자를 로그인시키고 팝업을 닫습니다.

app.get('/instagram-callback', (req, res) => {

    // ...

    // Serve an HTML page that signs the user in and updates the user profile.
    res.send(
        signInFirebaseTemplate(firebaseToken, userName, profilePic, accessToken)));
  });
});

function signInFirebaseTemplate(token, displayName, photoURL, instagramAccessToken) {
 return `
   <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
   <script src="promise.min.js"></script><!-- Promise Polyfill for older browsers -->
   <script>
     var token = '${token}';
     var config = {
       apiKey: MY_FIREBASE_API_KEY, // Change this!
       database URL: MY_DATABASE_URL // Change this!
     };
     // We sign in via a temporary Firebase app to update the profile.
     var tempApp = firebase.initializeApp(config, '_temp_');
     tempApp.auth().signInWithCustomToken(token).then(function(user) {
    
       // Saving the Instagram API access token in the Realtime Database.
       const tasks = [tempApp.database().ref('/instagramAccessToken/' + user.uid)
           .set('${instagramAccessToken}')];
  
       // Updating the displayname and photoURL if needed.
       if ('${displayName}' !== user.displayName || '${photoURL}' !== user.photoURL) {
         tasks.push(user.updateProfile({displayName: '${displayName}', photoURL: '${photoURL}'}));
       }
  
       // Wait for completion of above tasks.
       return Promise.all(tasks).then(function() {
         // Delete temporary Firebase app and sign in the default Firebase app, then close the popup.
         var defaultApp = firebase.initializeApp(config);
         Promise.all([
             defaultApp.auth().signInWithCustomToken(token),
             tempApp.delete()]).then(function() {
           window.close(); // We’re done! Closing the popup.
         });
       });
     });
   </script>`;
}

직접 시험해 보세요!

Android와 iOS는 어떠냐고요?

다 되었습니다!