Swift の ASWebAuthenticationSession による Instagram ログインの問題の解決

ASWebAuthenticationSession を使用した Swift での Instagram ログインの処理

このソリューションでは、SwiftUI と Apple の AuthenticationServices フレームワークを使用して Instagram のログイン問題を処理します。

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 などの Web ベースのフローを通じてユーザーを認証する安全な方法を提供します。
3. Instagram がカスタム URL スキームをサポートしないのはなぜですか?
4. Instagram は、セキュリティと OAuth 実装との互換性のために、ユニバーサル リンクまたは HTTPS ベースのリダイレクト URI を優先します。
5. 「エラー: 操作を完了できませんでした」問題に対処するにはどうすればよいですか?
6. あなたの callbackURLScheme アプリの設定で定義された URL と Instagram のリダイレクト URI と一致します。
7. の役割は何ですか presentationContextProvider?
8. presentationContextProvider Web 認証セッション 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 プロセス中にエラーが発生することなくスムーズかつ安全に認証できるようになります。 🚀