본문 바로가기

Flutter/01 SNS login

[Flutter] SNS login (2) - Facebook 관련 설정 및 인증 활성화

기본 구성은 아래와 같습니다.

1. Facebook 인증 활성화

2. Facebook 앱 만들기 및 Android Studio 환경 설정

 

 

1. Facebook 인증 활성화

 

 

활성화 버튼을 누르면 App ID, App secret 가 필요합니다.

 

 

2개의 정보는 https://developers.facebook.com/apps 여기에서 생성합니다.

 

2. Facebook 앱 만들기 및 Android Studio 환경 설정

 

소비자 선택후 , 계속~~

 

앱 이름은 잘 기억하세요, 아래에서 사용할 일이 있습니다. 앱만들기 클릭 ~~

비번을 물어보면 본인 계정의 비전을 입력하세요.

 

 

여기에 2개의 정보가 있습니다.

 

 

App ID, App secret 를 복사/붙여넣기 하세요.

입력이 끝났으면 저장하기 전에 다음 단계를 위해서 붉은 박스 부분을 미리 복사 합니다.

 

 

 

아까 복사한 링크를 여기에 붙여 넣고 저장.

 

 

안드로이드 관련 설정, 안드로이드 아이콘 클릭 ~~

 

 

1,2 번은 다음을 누르시고, 3번을 설정합니다. 입력이 끝나면 저장후, 계속~~

 

 

해시키 추가, 여기가 조금 복잡합니다. 

우선, 자바가 설치되어 있지 않다면 자바를 설치하세요. 이것은 keytool 이라는 프로그램이 필요해서 입니다.

OpenSSL 라이브러리를 다운로드 및 압축해제해서 저장하세요. 어디에 저장되어 있는지 꼭 기억하세요.

 

 

// 개발용 해시 키 생성
keytool -exportcert -alias androiddebugkey -keystore "C:\Users\USERNAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64

// OpenSSL 저장위치가 d:\openssl\ 이라면, 아래처럼 입력하면 됨
keytool -exportcert -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore | "d:\openssl\bin\openssl" sha1 -binary | "d:\openssl\bin\openssl" base64

 

해당 명령어 입력후, 비번을 물어보면 본인이 원하는 비밀번호를 입력하고 엔터~~

해시키 값이 나오면 "키 해지" 란에 입력하고 저장 ~~, 계속 클릭 ~~

 

 

아래 내용을 Android Studio 에 설정한다.

 

 

첫번째 복사 - strings.xml 파일위치가 facebook 예시와 다릅니다. 아래 그림 참고하여 파일을 찾습니다. styles.xml 파일을 복사해서 내용만 변경하는 방식으로 처리하면 오류를 줄일수 있습니다.

 

 

2번째 복사는 아래 그림 참고

 

 

3번째 복사는 아래 그림 참고, 3번째 복사를 보기 좋게 정리하면 아래 그림과 같음

 

 

7 ~ 10 번은 처리 내용이 없어서 생략함, 그냥 다음 ~~ 클릭만 하면 됩니다

 

상기의 내용으로 Facebook 관련 설정은 마무리 합니다.