Swift에서 ASWebAuthenticationSession을 사용하여 Instagram 로그인 문제 해결

ASWebAuthenticationSession을 사용하여 Swift에서 Instagram 로그인 처리

이 솔루션은 Instagram 로그인 문제를 처리하기 위해 SwiftUI 및 Apple의 AuthenticationServices 프레임워크를 사용합니다.

import SwiftUI
import AuthenticationServices

struct InstagramLoginView: View {
    @State private var authSession: ASWebAuthenticationSession?
    @State private var token: String = ""
    @State private var showAlert: Bool = false
    @State private var alertMessage: String = ""

    var body: some View {
        VStack {
            Text("Instagram Login")
                .font(.largeTitle)
                .padding()

            Button(action: { startInstagramLogin() }) {
                Text("Login with Instagram")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }

            if !token.isEmpty {
                Text("Token: \(token)")
                    .padding()
            }
        }
        .alert(isPresented: $showAlert) {
            Alert(title: Text("Error"),
                  message: Text(alertMessage),
                  dismissButton: .default(Text("OK")))
        }
    }

    func startInstagramLogin() {
        let clientID = "XXXXXXXXXX"
        let redirectURI = "https://example.com"

        guard let authURL = URL(string:
            "https://api.instagram.com/oauth/authorize?client_id=\(clientID)&redirect_uri=\(redirectURI)&scope=user_profile,user_media&response_type=code"
        ) else {
            alertMessage = "Invalid URL"
            showAlert = true
            return
        }

        authSession = ASWebAuthenticationSession(url: authURL, callbackURLScheme: nil) { callbackURL, error in
            if let error = error {
                alertMessage = error.localizedDescription
                showAlert = true
                return
            }

            guard let callbackURL = callbackURL else {
                alertMessage = "Invalid callback URL"
                showAlert = true
                return
            }

            if let code = URLComponents(string: callbackURL.absoluteString)?.queryItems?.first(where: { $0.name == "code" })?.value {
                getInstagramAccessToken(authCode: code)
            }
        }
        authSession?.presentationContextProvider = self
        authSession?.start()
    }

    func getInstagramAccessToken(authCode: String) {
        let tokenURL = "https://api.instagram.com/oauth/access_token"
        var request = URLRequest(url: URL(string: tokenURL)!)
        request.httpMethod = "POST"

        let clientID = "XXXXXXXXXX"
        let clientSecret = "XXXXXXXXXX"
        let redirectURI = "https://example.com"

        let params = "client_id=\(clientID)&client_secret=\(clientSecret)&grant_type=authorization_code&redirect_uri=\(redirectURI)&code=\(authCode)"
        request.httpBody = params.data(using: .utf8)
        request.setValue("application/x-www-form-urlencoded", forHTTPHeaderField: "Content-Type")

        URLSession.shared.dataTask(with: request) { data, response, error in
            if let error = error {
                alertMessage = error.localizedDescription
                showAlert = true
                return
            }

            guard let data = data else {
                alertMessage = "No data received"
                showAlert = true
                return
            }

            if let jsonResponse = try? JSONSerialization.jsonObject(with: data) as? [String: Any],
               let accessToken = jsonResponse["access_token"] as? String {
                DispatchQueue.main.async { token = accessToken }
            } else {
                alertMessage = "Failed to get access token"
                showAlert = true
            }
        }.resume()
    }
}

extension InstagramLoginView: ASWebAuthenticationPresentationContextProviding {
    func presentationAnchor(for session: ASWebAuthenticationSession) -> ASPresentationAnchor {
        UIApplication.shared.windows.first { $0.isKeyWindow }!
    }
}

리디렉션 URI 유효성 검사를 위한 Django 구현

이 스크립트는 Django를 백엔드로 사용하여 Instagram OAuth 콜백을 검증하고 토큰을 안전하게 처리합니다.

from django.http import JsonResponse, HttpResponseRedirect
from django.views.decorators.csrf import csrf_exempt
import requests

CLIENT_ID = 'XXXXXXXXXX'
CLIENT_SECRET = 'XXXXXXXXXX'
REDIRECT_URI = 'https://example.com/callback'

@csrf_exempt
def instagram_callback(request):
    code = request.GET.get('code')
    if not code:
        return JsonResponse({'error': 'Missing authorization code'})

    token_url = 'https://api.instagram.com/oauth/access_token'
    payload = {
        'client_id': CLIENT_ID,
        'client_secret': CLIENT_SECRET,
        'grant_type': 'authorization_code',
        'redirect_uri': REDIRECT_URI,
        'code': code
    }

    response = requests.post(token_url, data=payload)
    if response.status_code == 200:
        return JsonResponse(response.json())
    return JsonResponse({'error': 'Failed to retrieve access token'})

ASWebAuthenticationSession을 사용한 Instagram 로그인에 대한 일반적인 질문

1. 목적은 무엇입니까? ASWebAuthenticationSession?
2. ASWebAuthenticationSession iOS 애플리케이션의 OAuth와 같은 웹 기반 흐름을 통해 사용자를 인증하는 안전한 방법을 제공합니다.
3. Instagram이 사용자 정의 URL 구성표를 지원하지 않는 이유는 무엇입니까?
4. Instagram은 OAuth 구현과의 호환성 및 보안을 위해 범용 링크 또는 HTTPS 기반 리디렉션 URI를 우선시합니다.
5. "오류: 작업을 완료할 수 없습니다" 문제를 어떻게 처리합니까?
6. 귀하의 callbackURLScheme 앱 구성에 정의된 URL 및 Instagram의 리디렉션 URI와 일치합니다.
7. 역할은 무엇입니까? presentationContextProvider?
8. presentationContextProvider 웹 인증 세션 UI가 표시되는 위치를 지정하여 앱 창에 연결합니다.
9. Instagram 로그인을 로컬에서 테스트할 수 있나요?
10. 로컬 테스트는 제한되어 있지만 다음과 같은 도구를 사용할 수 있습니다. ngrok 리디렉션 URI 테스트를 위해 로컬 백엔드를 Instagram에 노출합니다.
11. Instagram 로그인을 위해 백엔드를 반드시 사용해야 합니까?
12. 백엔드 사용은 안전한 토큰 교환을 처리하고 클라이언트 비밀과 같은 민감한 데이터를 관리하므로 적극 권장됩니다.
13. 인증 코드를 어떻게 확인하나요?
14. 다음을 사용하여 Instagram의 토큰 엔드포인트로 코드를 보냅니다. URLSession 스위프트에서 또는 requests 검증을 위해 Python으로.
15. 토큰 요청이 실패하는 이유는 무엇입니까?
16. 다시 확인하세요 client ID, client secret, 리디렉션 URI가 Instagram에 구성된 것과 정확히 일치하는지 확인하세요.
17. 제공된 코드 예제를 재사용할 수 있나요?
18. 예, 스크립트는 모듈식이므로 최소한의 변경만으로 다른 OAuth 공급자에 맞게 조정할 수 있습니다.
19. 로그인 후 사용자 세션을 어떻게 처리합니까?
20. 다음을 사용하여 토큰을 안전하게 저장하세요. Keychain 사용자 세션을 유지하기 위해 iOS 또는 백엔드의 암호화된 저장소에 저장됩니다.

Instagram 로그인 흐름 모범 사례

ASWebAuthenticationSession을 사용하여 Instagram 로그인을 성공적으로 구현하려면 콜백 URL이 Instagram 앱 설정에 구성된 URL과 일치하는지 확인하는 것이 중요합니다. Instagram은 사용자 정의 인증 방식을 허용하지 않으므로 앱은 안전하고 공개적으로 액세스 가능한 리디렉션 URI를 사용해야 합니다. 또한 "오류: 작업을 완료할 수 없습니다."와 같은 오류를 처리하려면 URL 구성 요소의 유효성을 검사하고 인증 흐름을 신중하게 처리해야 합니다. 세션의 컨텍스트 제공자에 주의하여 인증 흐름이 활성 창에서 작동하고 사용자가 로그인 후 올바르게 리디렉션되는지 확인하세요.

로컬 구성이 항상 예상대로 작동하지 않을 수 있으므로 테스트는 중요한 단계입니다. 백엔드를 배포하고 ngrok과 같은 도구를 사용하여 테스트용 로컬 서비스를 노출하는 것을 고려해 보세요. 보안 관행에 세심한 주의를 기울이고 인증 토큰을 명확하게 처리하면 Instagram 로그인 구현이 더욱 안정적이 됩니다. 이러한 단계를 통해 사용자는 OAuth 프로세스 중에 오류가 발생하지 않고 원활하고 안전하게 인증할 수 있습니다. 🚀