Flutter에서 Back4App의 Parse를 사용한 타사 인증 완벽 가이드

소개 facebook, google, apple과 같은 서드파티 인증 방법을 flutter 앱에 통합하면 유연하고 편리한 로그인 옵션을 제공하여 사용자 경험을 크게 향상시킬 수 있습니다 back4app에서 제공하는 parse server는 이러한 인증 제공자를 위한 기본 지원을 제공합니다 이 튜토리얼에서는 back4app의 parse sdk를 사용하여 flutter 앱에서 서드파티 인증을 구현하는 방법을 배웁니다 이 튜토리얼이 끝나면 다음을 포함한 완전한 기능의 회원가입 및 로그인 기능이 있는 flutter 앱을 갖게 됩니다 parse를 사용한 표준 이메일/비밀번호 인증 서드파티 인증 방법 facebook google apple 전제 조건 이 튜토리얼을 따라 하려면 다음이 필요합니다 a back4app 계정 back4app https //www back4app com 에서 무료 계정에 가입하세요 a flutter 개발 환경 이 컴퓨터에 설치되어 있어야 합니다 flutter 설정에 도움이 필요하면 이 가이드를 참조하세요 https //flutter dev/docs/get started/install flutter 및 dart에 대한 기본 지식 처음이라면 flutter 소개 https //flutter dev/docs/get started/codelab 를 확인하세요 facebook, google, apple에 대한 개발자 계정 (서드파티 로그인 방법 설정에 필요) visual studio code 또는 android studio와 같은 ide 또는 텍스트 편집기 1단계 – back4app 백엔드 설정하기 1 1 back4app 프로젝트 만들기 당신의 back4app 대시보드 https //dashboard back4app com/ 에 로그인하세요 "새 앱 만들기"를 클릭하세요 애플리케이션 이름을 입력하세요, 예 "authdemo" , 그리고 "생성" 을 클릭하세요 프로젝트가 생성되면, 앱 설정 > 보안 및 키 로 이동하세요 당신의 애플리케이션 id 와 클라이언트 키 를 적어두세요 이 값들은 flutter 앱에서 parse를 초기화하는 데 필요합니다 1 2 인증 제공자 활성화하기 back4app 대시보드에서 서버 설정 > 인증 로 이동하세요 사용할 인증 방법을 활성화하세요 페이스북 구글 애플 각 제공자에 대해 특정 자격 증명(app id, client id, secret 등)을 입력해야 하며, 이는 다음 단계에서 설정됩니다 2단계 – flutter에서 parse sdk 설치 및 설정하기 2 1 새로운 flutter 프로젝트 만들기 터미널을 열고 새로운 flutter 프로젝트를 만드세요 flutter create auth demo cd auth demo 2 2 의존성 추가 pubspec yaml 을 열고 parse 및 서드파티 로그인 옵션에 대한 다음 의존성을 추가하세요 dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 flutter facebook auth ^5 0 5 google sign in ^5 4 0 sign in with apple ^3 3 0 flutter pub get 을 실행하여 의존성을 설치하세요 2 3 main dart 에서 parse 초기화 lib/main dart 파일에서 parse sdk를 가져오고 main 함수에서 초기화하세요 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'screens/auth screen dart'; // you'll create this file later void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your app id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'parse auth demo', theme themedata( primaryswatch colors blue, ), home authscreen(), ); } } 'your app id' 및 'your client key' 를 실제 back4app 자격 증명으로 교체하세요 3단계 – 표준 인증 구현 3 1 인증 서비스 생성 새 디렉토리를 생성합니다 services 아래에 lib 그리고 auth service dart 이 서비스는 parse를 사용하여 사용자 등록 및 로그인을 처리합니다 // lib/services/auth service dart import 'package\ parse server sdk flutter/parse server sdk dart'; class authservice { future\<parseuser?> signup(string username, string password, string email) async { var user = parseuser(username, password, email); var response = await user signup(); if (response success) { return user; } else { return null; } } future\<parseuser?> login(string username, string password) async { var user = parseuser(username, password, null); var response = await user login(); if (response success) { return user; } else { return null; } } future\<void> logout() async { var user = await parseuser currentuser() as parseuser?; await user? logout(); } } 3 2 인증 화면 만들기 새 디렉토리를 생성합니다 screens 아래에 lib 그리고 auth screen dart 이 화면은 표준 인증을 위한 ui를 제공합니다 // lib/screens/auth screen dart import 'package\ flutter/material dart'; import ' /services/auth service dart'; class authscreen extends statefulwidget { @override authscreenstate createstate() => authscreenstate(); } class authscreenstate extends state\<authscreen> { final texteditingcontroller usernamecontroller = texteditingcontroller(); final texteditingcontroller passwordcontroller = texteditingcontroller(); final texteditingcontroller emailcontroller = texteditingcontroller(); final authservice authservice = authservice(); void signup() async { var user = await authservice signup( usernamecontroller text trim(), passwordcontroller text trim(), emailcontroller text trim(), ); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('user created successfully!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('sign up failed '))); } } void login() async { var user = await authservice login( usernamecontroller text trim(), passwordcontroller text trim(), ); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('login failed '))); } } @override widget build(buildcontext context) { return scaffold( appbar appbar(title const text('parse auth')), body padding( padding const edgeinsets all(16 0), child singlechildscrollview( child column( children \[ const text( 'standard authentication', style textstyle(fontsize 18, fontweight fontweight bold), ), textfield( controller usernamecontroller, decoration const inputdecoration(labeltext 'username'), ), textfield( controller emailcontroller, decoration const inputdecoration(labeltext 'email'), ), textfield( controller passwordcontroller, decoration const inputdecoration(labeltext 'password'), obscuretext true, ), const sizedbox(height 20), elevatedbutton( onpressed signup, child const text('sign up'), ), elevatedbutton( onpressed login, child const text('login'), ), const divider(), const sizedbox(height 20), const text( 'third party authentication', style textstyle(fontsize 18, fontweight fontweight bold), ), // buttons for third party authentication will be added here ], ), ), ), ); } } 4단계 – 페이스북 인증 통합 4 1 페이스북 개발자 계정 설정 facebook 앱 만들기 이동하십시오 facebook for developers https //developers facebook com/ 에 로그인하십시오 클릭하세요 "내 앱" 그리고 "앱 만들기" 선택하십시오 "소비자" 앱 유형으로 선택하고 클릭하십시오 "다음" 다음을 입력하세요 앱 이름 및 연락 이메일 , 그런 다음 "앱 만들기" 를 클릭하세요 앱에 facebook 로그인 추가하기 앱 대시보드에서 다음으로 이동하십시오 "제품 추가" 를 선택하고 "facebook 로그인" 을 선택하십시오 선택하십시오 "안드로이드" 및/또는 "ios" 귀하의 대상 플랫폼에 따라 facebook에서 제공하는 설정 단계를 따르세요 앱의 bundle identifier 가 필요합니다 ios와 package name 이 필요합니다 android oauth 리디렉션 uri 구성하기 설정하십시오 oauth 리디렉션 uri 에 https //parseapi back4app com/auth/facebook/callback 앱 id 및 앱 비밀 얻기 앱 대시보드에서, "설정" > "기본" 다음 내용을 기록하세요 앱 id 및 앱 비밀 back4app에 앱 id와 비밀 키 추가하기 back4app 대시보드에서 다음으로 이동합니다 서버 설정 > 인증 아래에서 facebook , 앱 id 와 앱 비밀 을 입력하세요 4 2 업데이트 auth service dart facebook 로그인으로 다음 코드를 추가하여 facebook 인증을 처리하세요 // add these imports at the top import 'package\ flutter facebook auth/flutter facebook auth dart'; // inside authservice class map\<string, dynamic> facebookauthdata( string? accesstoken, string? userid, datetime? expirationdate) { return { 'id' userid, 'access token' accesstoken, 'expiration date' expirationdate? toutc() toiso8601string(), }; } future\<parseuser?> loginwithfacebook() async { final loginresult result = await facebookauth instance login(); if (result status == loginstatus success) { final accesstoken accesstoken = result accesstoken!; var user = parseuser(null, null, null); var response = await user loginwith( 'facebook', facebookauthdata( accesstoken token, accesstoken userid, accesstoken expires, ), ); if (response success) { return user; } } return null; } 4 3 facebook 로그인 버튼 추가하기 auth screen dart 다음 버튼을 ui에 추가하세요 elevatedbutton( onpressed () async { var user = await authservice loginwithfacebook(); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('facebook login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('facebook login failed '))); } }, child const text('login with facebook'), ), 4 4 플랫폼별 구성 안드로이드 다음 파일을 업데이트하세요 android/app/src/main/androidmanifest xml \<manifest xmlns\ android="http //schemas android com/apk/res/android" package="com example auth demo"> \<! add this inside the \<application> tag > \<meta data android\ name="com facebook sdk applicationid" android\ value="@string/facebook app id"/> \<activity android\ name="com facebook facebookactivity" android\ configchanges="keyboard|keyboardhidden|screenlayout|screensize|orientation" android\ label="@string/app name" /> \<! existing configurations > \</manifest> 다음 파일에 페이스북 앱 id를 추가하세요 android/app/src/main/res/values/strings xml \<resources> \<string name="app name">authdemo\</string> \<string name="facebook app id">your facebook app id\</string> \</resources> ios 다음 파일을 업데이트하세요 info plist 파일 \<key>cfbundleurltypes\</key> \<array> \<dict> \<key>cfbundleurlschemes\</key> \<array> \<string>fbyour facebook app id\</string> \</array> \</dict> \</array> \<key>facebookappid\</key> \<string>your facebook app id\</string> \<key>facebookdisplayname\</key> \<string>authdemo\</string> 5단계 – 구글 인증 통합 5 1 구글 개발자 계정 설정 google cloud console에서 프로젝트 만들기 이동하여 google cloud console https //console cloud google com/ 에서 새 프로젝트를 만드세요 oauth 동의 화면 구성 이동하여 api 및 서비스 > oauth 동의 화면 필요한 범위로 동의 화면을 설정하세요 oauth 클라이언트 id 만들기 이동하여 자격 증명 > 자격 증명 만들기 > oauth 클라이언트 id 웹 애플리케이션 을 선택하세요 허용된 리디렉션 uri https //parseapi back4app com/auth/google/callback 클라이언트 id 와 클라이언트 비밀 을 기록해 두세요 클라이언트 id와 비밀을 back4app에 추가하기 back4app 대시보드에서 서버 설정 > 인증 , google의 클라이언트 id 와 클라이언트 비밀 을 입력하세요 5 2 auth service dart 를 google 로그인으로 업데이트 다음 코드를 추가하여 google 인증을 처리하세요 // add this import at the top import 'package\ google sign in/google sign in dart'; // inside authservice class map\<string, dynamic> googleauthdata(string? idtoken, string? accesstoken) { return { 'id token' idtoken, 'access token' accesstoken, }; } future\<parseuser?> loginwithgoogle() async { final googlesignin googlesignin = googlesignin( scopes \['email'], ); final googlesigninaccount? googleuser = await googlesignin signin(); if (googleuser == null) { return null; } final googlesigninauthentication googleauth = await googleuser authentication; var user = parseuser(null, null, null); var response = await user loginwith( 'google', googleauthdata( googleauth idtoken, googleauth accesstoken, ), ); if (response success) { return user; } return null; } 5 3 google 로그인 버튼 추가하기 auth screen dart 다음 버튼을 ui에 추가하세요 elevatedbutton( onpressed () async { var user = await authservice loginwithgoogle(); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('google login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('google login failed '))); } }, child const text('login with google'), ), 5 4 플랫폼별 구성 안드로이드 다음 내용을 android/app/build gradle 파일에 추가하세요 dependencies { // add this line implementation 'com google android gms\ play services auth 20 0 0' // existing dependencies } 당신의 google 클라이언트 id를 android/app/src/main/res/values/strings xml \<resources> \<string name="app name">authdemo\</string> \<string name="default web client id">your google client id\</string> \</resources> 당신의 android/app/src/main/androidmanifest xml \<manifest xmlns\ android="http //schemas android com/apk/res/android" package="com example auth demo"> \<! existing configurations > \<application> \<! existing configurations > \<meta data android\ name="com google android gms client application id" android\ value="@string/default web client id" /> \</application> \</manifest> ios 역전된 클라이언트 id를 당신의 info plist \<key>cfbundleurltypes\</key> \<array> \<dict> \<key>cfbundleurlschemes\</key> \<array> \<string>com googleusercontent apps your client id\</string> \</array> \</dict> \</array> 6단계 – 애플 인증 통합 6 1 애플 개발자 계정 설정하기 앱 등록하기 에 로그인하십시오 apple developer portal https //developer apple com/ 및 앱을 등록하십시오 애플로 로그인 활성화하기 아래에서 식별자 , 앱을 선택하고 애플로 로그인 을 활성화하십시오 서비스 id 생성하기 앱을 위한 서비스 id 를 생성하십시오 리디렉션 uri 를 다음으로 설정하십시오 https //parseapi back4app com/auth/apple/callback 클라이언트 비밀 생성하기 애플로 로그인 개인 키를 생성하십시오 이 키를 사용하여 클라이언트 비밀 을 생성하십시오 back4app에 자격 증명 추가하기 back4app 대시보드에서 서버 설정 > 인증 , 애플을 위한 서비스 id 및 클라이언트 비밀 을 입력하십시오 6 2 auth service dart 를 애플 로그인으로 업데이트하기 apple 인증을 처리하기 위해 다음 코드를 추가하세요 // add this import at the top import 'package\ sign in with apple/sign in with apple dart'; import 'dart\ io' show platform; // inside authservice class map\<string, dynamic> appleauthdata(string? identitytoken, string? userid) { return { 'id' userid, 'token' identitytoken, }; } future\<parseuser?> loginwithapple() async { if (!platform isios) { // sign in with apple is only available on ios return null; } final credential = await signinwithapple getappleidcredential( scopes \[ appleidauthorizationscopes email, appleidauthorizationscopes fullname, ], ); var user = parseuser(null, null, null); var response = await user loginwith( 'apple', appleauthdata( credential identitytoken, credential useridentifier, ), ); if (response success) { return user; } return null; } 6 3 apple 로그인 버튼을 추가하세요 auth screen dart 다음 버튼을 ui에 추가하세요 elevatedbutton( onpressed () async { var user = await authservice loginwithapple(); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('apple login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('apple login failed '))); } }, child const text('login with apple'), ), 6 4 플랫폼별 구성 ios 전용 xcode에서 프로젝트를 열고 signing & capabilities 로 이동하세요 "+ capability"를 클릭하고 "sign in with apple" 을 추가하세요 당신의 bundle identifier 가 apple developer portal에 등록된 것과 일치하는지 확인하세요 7단계 – 애플리케이션 테스트 모든 인증 방법을 설정했으므로, 앱을 실행하고 각 로그인 옵션을 테스트할 수 있습니다 7 1 앱 실행 flutter run ios의 경우, 애플으로 로그인 테스트를 위해 실제 기기에서 앱을 실행해야 합니다 android의 경우, 에뮬레이터나 물리적 장치를 사용할 수 있습니다 7 2 표준 인증 테스트 사용자 이름, 이메일 및 비밀번호를 입력하세요 새 사용자를 만들기 위해 "가입하기" 를 탭하세요 생성된 자격 증명으로 로그인하기 위해 "로그인" 을 탭하세요 7 3 페이스북 로그인 테스트 탭 "facebook으로 로그인" facebook 로그인 화면이 나타납니다 facebook 자격 증명으로 로그인합니다 7 4 google 로그인 테스트 탭 "google로 로그인" google 로그인 화면이 나타납니다 google 계정으로 로그인합니다 7 5 apple 로그인 테스트 (ios 전용) 탭 "apple로 로그인" apple 로그인 프롬프트가 나타납니다 apple id를 사용하여 인증합니다 결론 이 튜토리얼에서는 표준 이메일/비밀번호 인증을 성공적으로 구현하고 parse sdk를 사용하여 flutter 앱에 facebook, google 및 apple과 같은 타사 인증 방법을 통합했습니다 이 설정은 여러 편리한 로그인 옵션을 제공하여 사용자 경험을 향상시킵니다 다음 단계 사용자 프로필 사용자가 자신의 정보를 업데이트할 수 있도록 앱을 확장합니다 로그아웃 기능 각 인증 방법에 대한 로그아웃 기능을 구현합니다 데이터 보안 parse acl 및 역할을 사용하여 역할 기반 액세스 제어를 구현하여 데이터를 보호합니다 오류 처리 사용자에게 더 자세한 피드백을 제공하기 위해 오류 처리를 개선합니다 ui 개선 앱의 브랜딩에 맞게 ui를 사용자 정의하고 사용자 경험을 개선합니다 추가 리소스 back4app 문서 https //www back4app com/docs parse flutter sdk 가이드 https //docs parseplatform org/flutter/guide/ flutter 공식 문서 https //flutter dev/docs facebook 개발자 https //developers facebook com/ google identity platform https //developers google com/identity apple로 로그인 문서 https //developer apple com/sign in with apple/ 행복한 코딩 되세요!