FirebaseUI की मदद से, अपने iOS ऐप्लिकेशन में साइन-इन करने की सुविधा जोड़ना

SwiftUI के लिए FirebaseUI, Firebase Authentication पर बनी एक मॉडर्न और SwiftUI-फ़र्स्ट लाइब्रेरी है. यह आपके ऐप्लिकेशन को पहले से बने साइन-इन फ़्लो उपलब्ध कराती है.

SwiftUI के लिए FirebaseUI के ये फ़ायदे हैं:

  • Opinionated default UI: AuthPickerView की मदद से, साइन-इन करने का पूरा फ़्लो जोड़ें.
  • पसंद के मुताबिक बनाया जा सकता है: डिफ़ॉल्ट बटन को अपने लेआउट में रेंडर करें या पूरी तरह से पसंद के मुताबिक अनुभव बनाएं.
  • पहचान छिपाकर खाता लिंक करना: पहचान छिपाकर खाता इस्तेमाल करने वाले उपयोगकर्ताओं को बदलने के बजाय, उन्हें अपग्रेड करें. हालांकि, ऐसा करना ज़रूरी नहीं है.
  • खाता मैनेजमेंट: साइन-अप करने, पासवर्ड वापस पाने, और खाता मैनेज करने के लिए पहले से मौजूद फ़्लो.
  • कई प्रोवाइडर: ईमेल/पासवर्ड, ईमेल लिंक, फ़ोन से पुष्टि, Apple, Google, Facebook, Twitter, और स्टैंडर्ड OAuth2/OIDC प्रोवाइडर.
  • पुष्टि करने की आधुनिक सुविधाएं: कई चरणों में पुष्टि (एमएफ़ए) और async/await एपीआई के लिए पहले से मौजूद सहायता.

शुरू करने से पहले

इंस्टॉल करना

SwiftUI के लिए FirebaseUI, Swift पैकेज के तौर पर उपलब्ध है. अपने Xcode प्रोजेक्ट में पैकेज इंस्टॉल करने के लिए, यह तरीका अपनाएं:

  1. Xcode में, File > Add Package Dependencies पर क्लिक करें.

  2. पैकेज का यूआरएल डालें:

    https://github.com/firebase/FirebaseUI-iOS
    
  3. डिपेंडेंसी नियम मेन्यू में, अगले मेजर वर्शन तक चुनें और कम से कम वर्शन को सबसे नई रिलीज़ पर सेट करें.

  4. Add Package पर क्लिक करें. इसके बाद, अपने प्रोजेक्ट में जोड़ने के लिए लाइब्रेरी चुनें.

    यह लाइब्रेरी हमेशा ज़रूरी होती है. इसमें मुख्य डिपेंडेंसी के साथ-साथ, ईमेल-पासवर्ड और ईमेल लिंक से साइन-इन करने की सुविधा भी शामिल है.

    • FirebaseAuthSwiftUI

     अगर आपको साइन इन करने के अन्य तरीके इस्तेमाल करने हैं, तो इनमें से एक या उससे ज़्यादा लाइब्रेरी भी चुनें:

    • FirebaseAppleSwiftUI (Apple से साइन इन करें)
    • FirebaseGoogleSwiftUI (Google से साइन इन करें)
    • FirebaseFacebookSwiftUI (Facebook से साइन इन करें)
    • FirebasePhoneAuthSwiftUI (फ़ोन से पुष्टि करना)
    • FirebaseTwitterSwiftUI (Twitter से साइन इन करें)
    • FirebaseOAuthSwiftUI (OAuth और OIDC की सेवा देने वाली स्टैंडर्ड कंपनियां, जैसे कि GitHub, Microsoft, Yahoo)
  5. चुनी गई लाइब्रेरी इंस्टॉल करने के लिए, Add Package पर क्लिक करें.

  6. अपने टॉप-लेवल View के इनिशलाइज़र में, FirebaseUI के AuthService को कॉन्फ़िगर करें. साथ ही, एनवायरमेंट का इस्तेमाल करके, चाइल्ड व्यू को सेवा पास करें.

    import FirebaseAuthSwiftUI
    import SwiftUI
    
    struct ContentView: View {
      let authService: AuthService
    
      init() {
        let configuration = AuthConfiguration()
    
        authService = AuthService(configuration: configuration)
          .withEmailSignIn() // Or whatever sign-in methods you want to support.
                             // See the next section.
      }
    
      var body: some View {
        AuthPickerView { // AuthPickerView (the prebuilt View) or a custom View.
            Text("Welcome to your app!")
        }
        .environment(authService)
      }
    }
    

साइन-इन करने के तरीके सेट अप करना

साइन-इन करने के हर तरीके के लिए, कुछ अतिरिक्त सेटअप चरणों को पूरा करना ज़रूरी है. अलग-अलग प्रोवाइडर सेट अप करने के लिए, नीचे दिए गए सेक्शन को बड़ा करें और निर्देशों का पालन करें.

ईमेल पता और पासवर्ड

  1. Firebase कंसोल के Security > Authentication > Sign-in method सेक्शन में जाकर, ईमेल/पासवर्ड की मदद से साइन इन करने की सुविधा चालू करें.

  2. अपने AuthService इंस्टेंस में सेवा देने वाली कंपनी को रजिस्टर करें:

    let authService = AuthService()
      .withEmailSignIn()
    

पासवर्ड के बिना ईमेल लिंक से साइन इन करने के लिए:

  1. Firebase कंसोल के सुरक्षा > पुष्टि करना > साइन-इन का तरीका सेक्शन में जाकर, ईमेल/पासवर्ड चालू करें. इसके बाद, ईमेल लिंक से साइन-इन करने की सुविधा चालू करें. ध्यान दें कि ईमेल लिंक से साइन-इन करने की सुविधा का इस्तेमाल करने के लिए, ईमेल या पासवर्ड से साइन-इन करने की सुविधा चालू होनी चाहिए.

  2. लिंक डोमेन को अनुमति वाले डोमेन में जोड़ें.

  3. ActionCodeSettings को कॉन्फ़िगर करें, इसे AuthConfiguration में पास करें, और सेवा देने वाली कंपनी को रजिस्टर करें:

    let actionCodeSettings = ActionCodeSettings()
    actionCodeSettings.handleCodeInApp = true
    actionCodeSettings.url = URL(string: "https://yourapp.firebaseapp.com")
    
    guard let bundleID = Bundle.main.bundleIdentifier else {
      fatalError("Missing bundle identifier for email link authentication setup.")
    }
    actionCodeSettings.setIOSBundleID(bundleID)
    
    let configuration = AuthConfiguration(
      emailLinkSignInActionCodeSettings: actionCodeSettings
    )
    
    let authService = AuthService(configuration: configuration)
      .withEmailLinkSignIn()
    
  4. जिस AppDelegate में FirebaseApp.configure() को कॉल किया जाता है उसमें application(_:open:options:) तरीके में लॉजिक जोड़ें. इससे, यूआरएल के Firebase Authentication साइन-इन लिंक होने पर, true दिखता है. इस लॉजिक से पता चलता है कि लिंक को FirebaseUI ने मैनेज किया है. साथ ही, लिंक मैनेज करने वाले अन्य टूल को इसे प्रोसेस नहीं करना चाहिए.

    import FacebookCore
    import FirebaseAuth
    import UIKit
    
    class AppDelegate: NSObject, UIApplicationDelegate {
      func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
      ) -> Bool {
        FirebaseApp.configure()
        return true
      }
    
      func application(
        _ application: UIApplication,
        open url: URL,
        options: [UIApplication.OpenURLOptionsKey: Any] = [:]
      ) -> Bool {
        if Auth.auth().canHandle(url) {
          return true
        }
        return false
      }
    }
    
  5. अगर आपने कस्टम व्यू बनाए हैं, तो लिंक से आपका ऐप्लिकेशन खुलने पर authService.handleSignInLink(url:) को कॉल करें.

Apple

'Apple से साइन इन करें' सुविधा का इस्तेमाल करने के लिए:

  1. 'Apple से साइन इन करें' सुविधा को कॉन्फ़िगर करें:

    1. Apple की डेवलपर साइट के Certificates, Identifiers & Profiles पेज पर जाकर, अपने ऐप्लिकेशन के लिए Sign In with Apple की सुविधा चालू करें.
    2. अपनी वेबसाइट को अपने ऐप्लिकेशन से जोड़ें. इसके बारे में वेब के लिए, Sign In with Apple को कॉन्फ़िगर करें के पहले सेक्शन में बताया गया है. प्रॉम्प्ट मिलने पर, इस यूआरएल को रिटर्न यूआरएल के तौर पर रजिस्टर करें:
      https://YOUR_FIREBASE_PROJECT_ID.firebaseapp.com/__/auth/handler
      आपको अपने Firebase प्रोजेक्ट का आईडी, Firebase कंसोल सेटिंग पेज पर मिल सकता है. इसके बाद, अपना नया सेवा आईडी नोट करें. आपको अगले सेक्शन में इसकी ज़रूरत पड़ेगी.
    3. 'Apple से साइन इन करें' सुविधा के लिए निजी पासकोड बनाएं. अगले सेक्शन में, आपको अपने नए निजी पासकोड और पासकोड आईडी की ज़रूरत होगी.
    4. अगर Firebase Authentication की ऐसी किसी सुविधा का इस्तेमाल किया जाता है जो उपयोगकर्ताओं को ईमेल भेजती है, तो Apple की निजी ईमेल रिले सेवा को कॉन्फ़िगर करें और noreply@YOUR_FIREBASE_PROJECT_ID.firebaseapp.com (या अपनी पसंद के मुताबिक बनाए गए ईमेल टेंप्लेट डोमेन) को रजिस्टर करें. इससे Apple, Firebase Authentication से भेजे गए ईमेल को Apple के उन ईमेल पतों पर भेज पाएगा जिनकी पहचान ज़ाहिर नहीं की गई है. इन सुविधाओं में, ईमेल लिंक से साइन-इन करना, ईमेल पते की पुष्टि करना, खाते में किए गए बदलाव को रद्द करना वगैरह शामिल है.
  2. Firebase कंसोल के Security > Authentication > Sign-in method सेक्शन में जाकर, Apple को चालू करें.

    • पिछले सेक्शन में बनाए गए सर्विस आईडी की जानकारी दें.
    • OAuth कोड फ़्लो कॉन्फ़िगरेशन सेक्शन में, Apple Team आईडी, निजी पासकोड, और पासकोड आईडी डालें. यह पासकोड आईडी, आपने पिछले सेक्शन में बनाया था.
  3. Xcode में, प्रोजेक्ट एडिटर का Signing & Capabilities सेक्शन खोलें और Sign in with Apple सुविधा जोड़ें.

  4. अपने AuthService इंस्टेंस में सेवा देने वाली कंपनी को रजिस्टर करें:

    let authService = AuthService()
      .withAppleSignIn()
    

Google

'Google साइन इन' सुविधा का इस्तेमाल करने के लिए:

  1. Firebase कंसोल के सुरक्षा > पुष्टि करना > साइन-इन का तरीका सेक्शन में जाकर, Google की सेवा चालू करें.

  2. अपने प्रोजेक्ट की GoogleService-Info.plist फ़ाइल की नई कॉपी डाउनलोड करें और उसे अपने Xcode प्रोजेक्ट में कॉपी करें. किसी भी मौजूदा वर्शन को नए वर्शन से ओवरराइट करें.

  3. अपने Xcode प्रोजेक्ट में कस्टम यूआरएल स्कीम जोड़ें:

    1. अपने प्रोजेक्ट का कॉन्फ़िगरेशन खोलें: बाईं ओर मौजूद ट्री व्यू में, प्रोजेक्ट के नाम पर क्लिक करें. TARGETS सेक्शन में जाकर अपना ऐप्लिकेशन चुनें. इसके बाद, Info टैब चुनें और URL Types सेक्शन को बड़ा करें.

    2. + बटन पर क्लिक करें और अपने रिवर्स क्लाइंट आईडी के लिए यूआरएल स्कीम जोड़ें. यह वैल्यू ढूंढने के लिए, GoogleService-Info.plist कॉन्फ़िगरेशन फ़ाइल खोलें और REVERSED_CLIENT_ID कुंजी ढूंढें. उस कुंजी की वैल्यू को कॉपी करें और उसे कॉन्फ़िगरेशन पेज पर मौजूद यूआरएल स्कीम बॉक्स में चिपकाएं. अन्य फ़ील्ड में कोई बदलाव न करें.

      कॉन्फ़िगरेशन पूरा होने के बाद, यह कुछ ऐसा दिखना चाहिए (हालांकि, इसमें आपके ऐप्लिकेशन के हिसाब से वैल्यू होनी चाहिए):

  4. अपने AuthService इंस्टेंस में सेवा देने वाली कंपनी को रजिस्टर करें:

    let authService = AuthService()
      .withGoogleSignIn()
    

Facebook

Facebook Login का इस्तेमाल करने के लिए:

  1. Meta for Developers साइट पर दिए गए निर्देशों का पालन करके, iOS SDK के लिए Facebook Login सेट अप करें. आखिरी चरण, "अपने कोड में Facebook लॉगिन जोड़ें" को छोड़ें.

  2. Firebase कंसोल के Security > Authentication > Sign-in method सेक्शन में जाकर, Facebook प्रोवाइडर को चालू करें. आपको Meta for Developers साइट से, Facebook ऐप्लिकेशन आईडी और ऐप्लिकेशन सीक्रेट की ज़रूरत होगी.

  3. अपने AuthService इंस्टेंस में सेवा देने वाली कंपनी को रजिस्टर करें:

    let authService = AuthService()
     .withFacebookSignIn()
    

फ़ोन नंबर

फ़ोन नंबर की मदद से पुष्टि करने की सुविधा इस्तेमाल करने के लिए:

  1. Firebase कंसोल के Security > Authentication > Sign-in method सेक्शन में जाकर, Phone प्रोवाइडर को चालू करें.

  2. साइलेंट सूचनाएं पाना शुरू करें सेक्शन में दिए गए निर्देशों के मुताबिक, अपने ऐप्लिकेशन के लिए APN कॉन्फ़िगर करें.

  3. अपने Xcode प्रोजेक्ट में कस्टम यूआरएल स्कीम जोड़ें:

    1. अपने प्रोजेक्ट का कॉन्फ़िगरेशन खोलें: बाईं ओर मौजूद ट्री व्यू में, प्रोजेक्ट के नाम पर क्लिक करें. TARGETS सेक्शन में जाकर अपना ऐप्लिकेशन चुनें. इसके बाद, Info टैब चुनें और URL Types सेक्शन को बड़ा करें.

    2. + बटन पर क्लिक करें और अपने एन्कोड किए गए ऐप्लिकेशन आईडी को यूआरएल स्कीम के तौर पर जोड़ें. यह वैल्यू ढूंढने के लिए, Firebase कंसोल में सेटिंग > सामान्य पर जाएं.

      कॉन्फ़िगरेशन पूरा होने के बाद, यह कुछ ऐसा दिखना चाहिए (हालांकि, इसमें आपके ऐप्लिकेशन के हिसाब से वैल्यू होनी चाहिए):

  4. जिस AppDelegate में FirebaseApp.configure() को कॉल किया जाता है उसमें APNs टोकन हैंडलर जोड़ें:

    import FacebookCore
    import FirebaseAuth
    import UIKit
    
    class AppDelegate: NSObject, UIApplicationDelegate {
      func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
      ) -> Bool {
        FirebaseApp.configure()
        return true
      }
    
      func application(
        _ application: UIApplication,
        didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data
      ) {
        #if DEBUG
        Auth.auth().setAPNSToken(deviceToken, type: .sandbox)
        #else
        Auth.auth().setAPNSToken(deviceToken, type: .prod)
        #endif
      }
    }
    
  5. अपने AuthService इंस्टेंस में सेवा देने वाली कंपनी को रजिस्टर करें:

    let authService = AuthService()
      .withPhoneSignIn()
    

Twitter (X)

Twitter Login का इस्तेमाल करने के लिए:

  1. X Developers की साइट पर दिए गए निर्देशों का पालन करके, X API क्रेडेंशियल जनरेट करें.

  2. Firebase कंसोल के सुरक्षा > पुष्टि करना > साइन-इन का तरीका सेक्शन में जाकर, Twitter की सेवा देने वाली कंपनी को चालू करें. आपको X Developer Console से एपीआई पासकोड और एपीआई सीक्रेट की ज़रूरत होगी.

  3. अपने AuthService इंस्टेंस में सेवा देने वाली कंपनी को रजिस्टर करें:

    let authService = AuthService()
      .withTwitterSignIn()
    

स्टैंडर्ड OAuth2 और OIDC प्रोवाइडर

FirebaseUI में, पहले से मौजूद OAuth की सेवा देने वाली कंपनियों के साथ काम करने की सुविधा भी मिलती है. जैसे, GitHub, Microsoft, और Yahoo. साथ ही, Firebase से पुष्टि करने की सुविधा में कॉन्फ़िगर की गई, ओआईडीसी की सेवा देने वाली कस्टम कंपनियों के साथ भी काम करने की सुविधा मिलती है.

 let authService = AuthService()
  .withOAuthSignIn(OAuthProviderSwift.github())
  .withOAuthSignIn(OAuthProviderSwift.microsoft())
  .withOAuthSignIn(OAuthProviderSwift.yahoo())

कस्टम OIDC प्रोवाइडर के लिए, पहले Firebase Authentication में प्रोवाइडर को कॉन्फ़िगर करें. इसके बाद, अपने प्रोवाइडर आईडी और बटन कॉन्फ़िगरेशन के साथ OAuthProviderSwift बनाएं:

let lineProvider = OAuthProviderSwift(
  providerId: "oidc.line",
  buttonLabel: "Sign in with LINE",
  displayName: "LINE",
  iconSystemName: "person.crop.circle.badge.checkmark",
  buttonBackgroundColor: .green,
  buttonForegroundColor: .white
)

let authService = AuthService()
  .withOAuthSignIn(lineProvider)

पहले से मौजूद पुष्टि करने वाले व्यू का इस्तेमाल करना

SwiftUI के लिए FirebaseUI, AuthPickerView उपलब्ध कराता है. यह पहले से बना, अपनी राय रखने वाला पुष्टि करने वाला यूज़र इंटरफ़ेस (यूआई) है. यह आपके लिए, पुष्टि करने की पूरी प्रोसेस को मैनेज करता है. यह आपके ऐप्लिकेशन में पुष्टि करने की सुविधा जोड़ने का सबसे आसान तरीका है.

उदाहरण

यहां AuthPickerView के इस्तेमाल का एक उदाहरण दिया गया है. इसमें कई प्रोवाइडर और कॉन्फ़िगरेशन के विकल्प शामिल हैं:

import FirebaseAppleSwiftUI
import FirebaseAuthSwiftUI
import FirebaseGoogleSwiftUI
import SwiftUI

struct ContentView: View {
  let authService: AuthService

  init() {
    // Create configuration with options
    let configuration = AuthConfiguration(
      tosUrl: URL(string: "https://example.com/tos"),
      privacyPolicyUrl: URL(string: "https://example.com/privacy"),
      shouldAutoUpgradeAnonymousUsers: true
    )

    // Initialize AuthService with multiple providers
    authService = AuthService(configuration: configuration)
      .withEmailSignIn()
      .withAppleSignIn()
      .withGoogleSignIn()
  }

  var body: some View {
    AuthPickerView {
      authenticatedContent
    }
    .environment(authService)
  }

  var authenticatedContent: some View {
    NavigationStack {
      VStack(spacing: 20) {
        if authService.authenticationState == .authenticated {
          Text("Authenticated")
          
          Button("Manage Account") {
            authService.isPresented = true
          }
          .buttonStyle(.bordered)
          
          Button("Sign Out") {
            Task {
              try? await authService.signOut()
            }
          }
          .buttonStyle(.borderedProminent)
        } else {
          Text("Not Authenticated")
          
          Button("Sign In") {
            authService.isPresented = true
          }
          .buttonStyle(.borderedProminent)
        }
      }
      .navigationTitle("My App")
    }
    .onChange(of: authService.authenticationState) { _, newValue in
      // Automatically show auth UI when not authenticated
      if newValue != .authenticating {
        authService.isPresented = (newValue == .unauthenticated)
      }
    }
  }
}

पसंद के मुताबिक बनाने की सामान्य सुविधा

हालांकि, सभी AuthConfiguration पैरामीटर ज़रूरी नहीं हैं, लेकिन ज़्यादातर ऐप्लिकेशन कम से कम इन सेटिंग को अपनी ज़रूरत के मुताबिक बनाते हैं:

let configuration = AuthConfiguration(
    logo: ImageResource.exampleLogoAsset,
    customStringsBundle: .main,
    tosUrl: URL(string: "https://example.com/tos"),
    privacyPolicyUrl: URL(string: "https://example.com/privacy"),
)
  • logo: पुष्टि करने वाली शीट पर दिखने वाली लोगो की इमेज. अपनी इमेज ऐसेट शामिल करने के बारे में जानकारी पाने के लिए, अपने Xcode प्रोजेक्ट में इमेज जोड़ना लेख पढ़ें.

  • customStringsBundle: तय किए गए बंडल से कस्टम स्ट्रिंग का इस्तेमाल करें. इसका इस्तेमाल, स्थानीय भाषा में अनुवाद करने के लिए किया जाता है. साथ ही, AuthPickerView की ओर से इस्तेमाल की जाने वाली डिफ़ॉल्ट स्ट्रिंग को पसंद के मुताबिक बनाने के लिए भी किया जाता है. उदाहरण के लिए, पुष्टि करने वाली शीट में सबसे ऊपर दिखने वाले मैसेज को सेट करने के लिए, Localizable.strings बनाएं. इसमें यह कॉन्टेंट शामिल करें:

    "Sign in with Firebase" = "Sign in to use ExampleApp";
    

पहले से बने व्यू में क्या शामिल है

AuthPickerView का इस्तेमाल करने पर, आपको ये सुविधाएं मिलती हैं:

  1. शीट प्रज़ेंटेशन: पुष्टि करने वाला यूज़र इंटरफ़ेस (यूआई), मॉडल शीट के तौर पर दिखता है
  2. पहले से मौजूद नेविगेशन: साइन-इन, पासवर्ड वापस पाने, एमएफ़ए, ईमेल लिंक, और फ़ोन नंबर की मदद से खाते की पुष्टि करने वाली स्क्रीन के बीच अपने-आप नेविगेट होने की सुविधा
  3. पुष्टि की स्थिति को मैनेज करना: authService.authenticationState के आधार पर, पुष्टि करने वाले यूज़र इंटरफ़ेस (यूआई) और आपके कॉन्टेंट के बीच अपने-आप स्विच होता है
  4. isPresented के ज़रिए कंट्रोल करना: authService.isPresented = true/false को सेट करके, यह कंट्रोल करें कि पुष्टि करने वाली शीट कब दिखे

राय देने वाले व्यवहार

डिफ़ॉल्ट AuthPickerView, कई जटिल स्थितियों को हैंडल करने के बारे में राय देता है:

1. खाते से जुड़े विवादों को हल करना

जब खाते से जुड़ी कोई समस्या होती है (जैसे, किसी ऐसे क्रेडेंशियल से साइन इन करना जो पहले से ही किसी दूसरे खाते से जुड़ा हुआ है), तो AuthPickerView उसे अपने-आप मैनेज करता है:

  • बिना नाम वाले उपयोगकर्ता के अपग्रेड से जुड़ी समस्याएं: अगर shouldAutoUpgradeAnonymousUsers चालू है और बिना नाम वाले उपयोगकर्ता के अपग्रेड के दौरान कोई समस्या आती है, तो सिस्टम बिना नाम वाले उपयोगकर्ता को अपने-आप साइन आउट कर देता है और नए क्रेडेंशियल से साइन इन कर देता है.
  • अन्य समस्याएं: अगर बिना पहचान वाले खातों के बीच क्रेडेंशियल से जुड़ी समस्याएं आती हैं, तो सिस्टम पेंडिंग क्रेडेंशियल को सेव कर लेता है. साथ ही, साइन इन करने के बाद उसे लिंक करने की कोशिश करता है.

इसे NavigationStack लेवल पर लागू किए गए AccountConflictModifier से मैनेज किया जाता है.

2. कई चरणों में पुष्टि (एमएफ़ए)

आपके कॉन्फ़िगरेशन में एमएफ़ए चालू होने पर:

  • साइन इन करने के दौरान, एमएफ़ए की ज़रूरत होने पर अपने-आप पता लगाता है
  • एमएफ़ए रिज़ॉल्यूशन की सही स्क्रीन (एसएमएस या टीओटीपी) दिखाता है
  • एमएफ़ए में रजिस्टर करने और उसे मैनेज करने की प्रोसेस को हैंडल करता है
  • एसएमएस और समय के हिसाब से, एक बार इस्तेमाल होने वाले पासवर्ड (टीओटीपी) की सुविधा देता है
3. गड़बड़ी ठीक करना

डिफ़ॉल्ट व्यू में, गड़बड़ी को ठीक करने की सुविधा पहले से मौजूद होती है:

  • सूचना वाले डायलॉग बॉक्स में, गड़बड़ी के ऐसे मैसेज दिखाता है जिन्हें उपयोगकर्ता के लिए समझना आसान हो
  • यह फ़िल्टर, उन गड़बड़ियों को अपने-आप हटा देता है जिन्हें अंदरूनी तौर पर मैनेज किया जाता है. जैसे, रद्द करने से जुड़ी गड़बड़ियां, अपने-आप मैनेज होने वाली समस्याएं
  • StringUtils की मदद से, स्थानीय भाषा में गड़बड़ी के मैसेज इस्तेमाल करता है
  • गड़बड़ियों को reportError एनवायरमेंट कुंजी के ज़रिए भेजा जाता है

ईमेल लिंक से साइन-इन करने की सुविधा कॉन्फ़िगर होने पर:

  • ईमेल पते को ऐप्लिकेशन के स्टोरेज में अपने-आप सेव करता है
  • ईमेल से डीप लिंक नेविगेशन को मैनेज करता है
  • ईमेल पते की पुष्टि करने की पूरी प्रोसेस को मैनेज करता है
  • ईमेल लिंक के ज़रिए, पहचान छिपाने वाले उपयोगकर्ता की सदस्यता को अपग्रेड करने की सुविधा
5. पहचान छिपाकर इस्तेमाल करने वाले लोगों के लिए, अपने-आप अपग्रेड होने की सुविधा

shouldAutoUpgradeAnonymousUsers के चालू होने पर:

  • साइन इन करने के नए क्रेडेंशियल की मदद से, बिना नाम वाले खातों को अपने-आप लिंक करने की कोशिश करता है
  • यह पहचान छिपाकर शुरू किए गए सेशन को बदलने के बजाय, उन्हें अपग्रेड करके उपयोगकर्ता का डेटा सुरक्षित रखता है
  • अपग्रेड से जुड़ी समस्याओं को आसानी से हल करता है
6. डिफ़ॉल्ट व्यू में फिर से पुष्टि करना

खाते मिटाने, पासवर्ड अपडेट करने या एमएफ़ए फ़ैक्टर से ऑप्ट आउट करने जैसी संवेदनशील कार्रवाइयों के लिए, हाल ही में की गई पुष्टि की ज़रूरत होती है. डिफ़ॉल्ट व्यू का इस्तेमाल करने पर, उपयोगकर्ता के साइन-इन प्रोवाइडर के आधार पर, फिर से पुष्टि करने की प्रोसेस अपने-आप मैनेज हो जाती है.

जब किसी संवेदनशील कार्रवाई के लिए फिर से पुष्टि करने की ज़रूरत होती है, तो डिफ़ॉल्ट व्यू अपने-आप:

  • OAuth की सेवा देने वाली कंपनियां (Google, Apple, Facebook, Twitter वगैरह): उपयोगकर्ता से पुष्टि करने के लिए कहें. इसके बाद, नए क्रेडेंशियल अपने-आप पाएं और कार्रवाई पूरी करें.

  • ईमेल/पासवर्ड: उपयोगकर्ता को आगे बढ़ने से पहले, अपना पासवर्ड डालने के लिए कहें.

  • ईमेल लिंक: पुष्टि करने के लिए ईमेल भेजने का अनुरोध करने वाली सूचना दिखाएं. इसके बाद, ईमेल देखने के निर्देशों वाली शीट दिखाएं. उपयोगकर्ता, फिर से पुष्टि करने के लिए ईमेल में दिए गए लिंक पर टैप करता है.

  • फ़ोन: पुष्टि करने की ज़रूरत के बारे में बताने वाली सूचना दिखाएं. इसके बाद, एसएमएस कोड की मदद से पुष्टि करने के लिए एक शीट दिखाएं.

फिर से पुष्टि होने के बाद, कार्रवाई अपने-आप फिर से शुरू हो जाती है. AuthPickerView या पहले से मौजूद खाता मैनेजमेंट व्यू (UpdatePasswordView, SignedInView वगैरह) का इस्तेमाल करते समय, किसी अतिरिक्त कोड की ज़रूरत नहीं होती.

ऐडवांस: कस्टम ऑथ व्यू बनाना

अगर आपको यूज़र इंटरफ़ेस (यूआई) या नेविगेशन फ़्लो पर ज़्यादा कंट्रोल चाहिए, तो आपके पास अपनी पसंद के मुताबिक पुष्टि करने के व्यू बनाने का विकल्प है. इसके लिए, पुष्टि करने के लॉजिक के लिए AuthService का इस्तेमाल किया जा सकता है.

FirebaseUI के एलिमेंट को कस्टम लॉजिक के साथ कई तरीकों से जोड़ा जा सकता है. यहां दिए गए सेक्शन में, पसंद के मुताबिक बनाने के कुछ तरीकों के उदाहरण दिए गए हैं. इनका इस्तेमाल किया जा सकता है.

पहला तरीका: registerProvider() के साथ कस्टम बटन

बटन के लुक को पूरी तरह से कंट्रोल करने के लिए, आपके पास अपना कस्टम AuthProviderUI लागू करने का विकल्प होता है. यह किसी भी प्रोवाइडर को रैप करता है और आपके कस्टम बटन व्यू को दिखाता है.

कस्टम प्रोवाइडर यूज़र इंटरफ़ेस (यूआई) बनाना

उदाहरण के लिए, कस्टम Twitter बटन बनाने का तरीका यहां बताया गया है:

import FirebaseAuthSwiftUI
import FirebaseTwitterSwiftUI
import SwiftUI

// Step 1: Create your custom button view
struct CustomTwitterButton: View {
  let provider: TwitterProviderSwift
  @Environment(AuthService.self) private var authService
  @Environment(\.mfaHandler) private var mfaHandler

  var body: some View {
    Button {
      Task {
        do {
          let outcome = try await authService.signIn(provider)

          // Handle MFA if required
          if case let .mfaRequired(mfaInfo) = outcome,
             let onMFA = mfaHandler {
            onMFA(mfaInfo)
          }
        } catch {
          // Do Something Else
        }
      }
    } label: {
      HStack { // Your custom icon
        Text("Sign in with Twitter")
          .fontWeight(.semibold)
      }
      .frame(maxWidth: .infinity)
      .padding()
      .background(
        LinearGradient(
          colors: [Color.blue, Color.cyan],
          startPoint: .leading,
          endPoint: .trailing
        )
      )
      .foregroundColor(.white)
      .cornerRadius(12)
      .shadow(radius: 4)
    }
  }
}

// Step 2: Create a custom AuthProviderUI wrapper
class CustomTwitterProviderAuthUI: AuthProviderUI {
  private let typedProvider: TwitterProviderSwift
  var provider: AuthProviderSwift { typedProvider }
  let id: String = "twitter.com"

  init(provider: TwitterProviderSwift = TwitterProviderSwift()) {
    typedProvider = provider
  }

  @MainActor func authButton() -> AnyView {
    AnyView(CustomTwitterButton(provider: typedProvider))
  }
}

// Step 3: Use it in your app
struct ContentView: View {
  let authService: AuthService

  init() {
    let configuration = AuthConfiguration()
    authService = AuthService(configuration: configuration)

    // Register your custom provider UI
    authService.registerProvider(
      providerWithButton: CustomTwitterProviderAuthUI()
    )
    authService.isPresented = true
  }

  var body: some View {
    AuthPickerView {
      usersApp
    }
    .environment(authService)
  }

  var usersApp: some View {
    NavigationStack {
      VStack {
        Button {
          authService.isPresented = true
        } label: {
          Text("Authenticate")
        }
      }
    }
  }
}

पसंद के मुताबिक बनाए गए बटन का आसान उदाहरण

किसी भी प्रोवाइडर के लिए, आसान कस्टम बटन भी बनाए जा सकते हैं:

import FirebaseAuthSwiftUI
import FirebaseGoogleSwiftUI
import FirebaseAppleSwiftUI
import SwiftUI

// Custom Google Provider UI
class CustomGoogleProviderAuthUI: AuthProviderUI {
  private let typedProvider: GoogleProviderSwift
  var provider: AuthProviderSwift { typedProvider }
  let id: String = "google.com"
  
  init() {
    typedProvider = GoogleProviderSwift()
  }
  
  @MainActor func authButton() -> AnyView {
    AnyView(CustomGoogleButton(provider: typedProvider))
  }
}

struct CustomGoogleButton: View {
  let provider: GoogleProviderSwift
  @Environment(AuthService.self) private var authService
  
  var body: some View {
    Button {
      Task {
        try? await authService.signIn(provider)
      }
    } label: {
      HStack {
        Image(systemName: "g.circle.fill")
        Text("My Custom Google Button")
      }
      .frame(maxWidth: .infinity)
      .padding()
      .background(Color.purple) // Your custom color
      .foregroundColor(.white)
      .cornerRadius(10)
    }
  }
}

// Then use it
struct ContentView: View {
  let authService: AuthService
  
  init() {
    let configuration = AuthConfiguration()
    authService = AuthService(configuration: configuration)
      .withAppleSignIn() // Use default Apple button
    
    // Use custom Google button
    authService.registerProvider(
      providerWithButton: CustomGoogleProviderAuthUI()
    )
  }
  
  var body: some View {
    AuthPickerView {
      Text("App Content")
    }
    .environment(authService)
  }
}

यह तरीका, Google, Apple, Twitter, Facebook, फ़ोन, और OAuth की सुविधा देने वाली सभी कंपनियों के लिए काम करता है. बस अपना कस्टम बटन व्यू बनाएं और उसे AuthProviderUI के मुताबिक क्लास में रैप करें.

दूसरा तरीका: कस्टम व्यू के साथ डिफ़ॉल्ट बटन

AuthService.renderButtons() का इस्तेमाल किया जा सकता है और AuthPickerView को बायपास किया जा सकता है, ताकि डिफ़ॉल्ट पुष्टि करने वाले बटन रेंडर किए जा सकें. साथ ही, अपना लेआउट और नेविगेशन उपलब्ध कराया जा सके:

import FirebaseAuthSwiftUI
import FirebaseGoogleSwiftUI
import FirebaseAppleSwiftUI
import SwiftUI

struct CustomAuthView: View {
  @Environment(AuthService.self) private var authService

  var body: some View {
    VStack(spacing: 30) {
      // Your custom logo/branding
      Image("app-logo")
        .resizable()
        .frame(width: 150, height: 150)
      
      Text("Welcome to My App")
        .font(.largeTitle)
        .fontWeight(.bold)
      
      Text("Sign in to continue")
        .font(.subheadline)
        .foregroundStyle(.secondary)
      
      // Render default auth buttons
      authService.renderButtons(spacing: 12)
        .padding()
    }
    .padding()
  }
}

struct ContentView: View {
  init() {
    let configuration = AuthConfiguration()
    
    authService = AuthService(configuration: configuration)
      .withGoogleSignIn()
      .withAppleSignIn()
  }
  
  let authService: AuthService

  var body: some View {
    NavigationStack {
      if authService.authenticationState == .authenticated {
        Text("Authenticated!")
      } else {
        CustomAuthView()
      }
    }
    .environment(authService)
  }
}

तीसरा तरीका: कस्टम नेविगेशन के साथ कस्टम व्यू

पूरे फ़्लो पर पूरा कंट्रोल पाने के लिए, AuthPickerView को बायपास किया जा सकता है और अपना नेविगेशन सिस्टम बनाया जा सकता है:

import FirebaseAuth
import FirebaseAuthSwiftUI
import FirebaseGoogleSwiftUI
import SwiftUI

enum CustomAuthRoute {
  case signIn
  case phoneVerification
  case mfaResolution
}

struct ContentView: View {
  private let authService: AuthService
  @State private var navigationPath: [CustomAuthRoute] = []
  @State private var errorMessage: String?

  init() {
    let configuration = AuthConfiguration()
    self.authService = AuthService(configuration: configuration)
      .withGoogleSignIn()
      .withPhoneSignIn()
  }

  var body: some View {
    NavigationStack(path: $navigationPath) {
      Group {
        if authService.authenticationState == .authenticated {
          authenticatedView
        } else {
          customSignInView
        }
      }
      .navigationDestination(for: CustomAuthRoute.self) { route in
        switch route {
        case .signIn:
          customSignInView
        case .phoneVerification:
          customPhoneVerificationView
        case .mfaResolution:
          customMFAView
        }
      }
    }
    .environment(authService)
    .alert("Error", isPresented: .constant(errorMessage != nil)) {
      Button("OK") {
        errorMessage = nil
      }
    } message: {
      Text(errorMessage ?? "")
    }
  }

  var customSignInView: some View {
    VStack(spacing: 20) {
      Text("Custom Sign In")
        .font(.title)
      
      Button("Sign in with Google") {
        Task {
          do {
            let provider = GoogleProviderSwift(clientID: Auth.auth().app?.options.clientID ?? "")
            let outcome = try await authService.signIn(provider)
            
            // Handle MFA if required
            if case .mfaRequired = outcome {
              navigationPath.append(.mfaResolution)
            }
          } catch {
            errorMessage = error.localizedDescription
          }
        }
      }
      .buttonStyle(.borderedProminent)
      
      Button("Phone Sign In") {
        navigationPath.append(.phoneVerification)
      }
      .buttonStyle(.bordered)
    }
    .padding()
  }

  var customPhoneVerificationView: some View {
    Text("Custom Phone Verification View")
    // Implement your custom phone auth UI here
  }

  var customMFAView: some View {
    Text("Custom MFA Resolution View")
    // Implement your custom MFA UI here
  }

  var authenticatedView: some View {
    VStack(spacing: 20) {
      Text("Welcome!")
      Text("Email: \(authService.currentUser?.email ?? "N/A")")
      
      Button("Sign Out") {
        Task {
          try? await authService.signOut()
        }
      }
      .buttonStyle(.borderedProminent)
    }
  }
}

कस्टम व्यू के लिए ज़रूरी बातें

कस्टम व्यू बनाते समय, आपको कई चीज़ों को खुद मैनेज करना होगा. हालांकि, AuthPickerView उन्हें अपने-आप मैनेज करता है:

  1. खाते से जुड़े विवाद: AuthServiceError.accountConflict का इस्तेमाल करके, विवादों को हल करने की अपनी रणनीति लागू करें
  2. एमएफ़ए मैनेज करना: .mfaRequired के लिए SignInOutcome देखें और एमएफ़ए को मैन्युअल तरीके से मैनेज करें
  3. पहचान छिपाकर इस्तेमाल करने वाले उपयोगकर्ता के लिए अपग्रेड: अगर shouldAutoUpgradeAnonymousUsers चालू है, तो पहचान छिपाकर इस्तेमाल करने वाले खातों को लिंक करने की प्रोसेस को मैनेज करें
  4. नेविगेशन स्टेट: पुष्टि करने वाली अलग-अलग स्क्रीन (फ़ोन नंबर की मदद से खाते की पुष्टि करना, पासवर्ड वापस पाना वगैरह) के बीच नेविगेशन मैनेज करना
  5. लोड होने की स्थितियां: एसिंक्रोनस तरीके से पुष्टि करने की प्रोसेस के दौरान, लोड होने की जानकारी देने वाले इंडिकेटर दिखाएं. इसके लिए, authService.authenticationState को मॉनिटर करें
  6. फिर से पुष्टि करना: संवेदनशील कार्रवाइयों के लिए, फिर से पुष्टि करने से जुड़ी गड़बड़ियों को ठीक करें. इसके लिए, यहां कस्टम व्यू में फिर से पुष्टि करना देखें

कस्टम व्यू में फिर से पुष्टि करना

कस्टम व्यू बनाते समय, खास गड़बड़ियों को पकड़कर और अपना फ़्लो लागू करके, फिर से पुष्टि करने की प्रोसेस को मैनेज करें. संवेदनशील कार्रवाइयों की वजह से, फिर से पुष्टि करने से जुड़ी चार तरह की गड़बड़ियां होती हैं. हर गड़बड़ी में, संदर्भ की जानकारी शामिल होती है.

लागू करने के पैटर्न

OAuth की सेवा देने वाली कंपनियां (Google, Apple, Facebook, Twitter वगैरह):

गड़बड़ी को पकड़ें और reauthenticate(context:) को कॉल करें, जो OAuth फ़्लो को अपने-आप मैनेज करता है:

do {
  try await authService.deleteUser()
} catch let error as AuthServiceError {
  if case .oauthReauthenticationRequired(let context) = error {
    try await authService.reauthenticate(context: context)
    try await authService.deleteUser() // Retry operation
  }
}

ईमेल/पासवर्ड:

गड़बड़ी का पता लगाएं, पासवर्ड के लिए प्रॉम्प्ट करें, क्रेडेंशियल बनाएं, और reauthenticate(with:) को कॉल करें:

do {
  try await authService.updatePassword(to: newPassword)
} catch let error as AuthServiceError {
  if case .emailReauthenticationRequired(let context) = error {
    // Show your password prompt UI
    let password = await promptUserForPassword()
    let credential = EmailAuthProvider.credential(
      withEmail: context.email,
      password: password
    )
    try await authService.reauthenticate(with: credential)
    try await authService.updatePassword(to: newPassword) // Retry
  }
}

फ़ोन नंबर:

गड़बड़ी का पता लगाएं, फ़ोन नंबर की पुष्टि करें, क्रेडेंशियल बनाएं, और reauthenticate(with:) को कॉल करें:

do {
  try await authService.deleteUser()
} catch let error as AuthServiceError {
  if case .phoneReauthenticationRequired(let context) = error {
    // Send verification code
    let verificationId = try await authService.verifyPhoneNumber(
      phoneNumber: context.phoneNumber
    )
    // Show your SMS code input UI
    let code = await promptUserForSMSCode()
    let credential = PhoneAuthProvider.provider().credential(
      withVerificationID: verificationId,
      verificationCode: code
    )
    try await authService.reauthenticate(with: credential)
    try await authService.deleteUser() // Retry
  }
}

ईमेल लिंक:

गड़बड़ी का पता लगाएं, पुष्टि के लिए ईमेल भेजें, और आने वाले यूआरएल को मैनेज करें:

do {
  try await authService.updatePassword(to: newPassword)
} catch let error as AuthServiceError {
  if case .emailLinkReauthenticationRequired(let context) = error {
    // Send verification email
    try await authService.sendEmailSignInLink(
      email: context.email,
      isReauth: true
    )
    // Show your "Check your email" UI
    await showCheckEmailUI()
    // When user taps the link, it opens your app with a URL
    // Handle it in your URL handler:
    // try await authService.handleSignInLink(url: url)
    // The handleSignInLink method automatically completes reauthentication
    try await authService.updatePassword(to: newPassword) // Retry
  }
}

फिर से पुष्टि करने के सभी कॉन्टेक्स्ट ऑब्जेक्ट में, इस्तेमाल करने वाले लोगों के लिए उपलब्ध टेक्स्ट के लिए .displayMessage प्रॉपर्टी शामिल होती है.

OAuth की सेवा देने वाली कस्टम कंपनियां

पहले से मौजूद सेवाओं के अलावा, अन्य सेवाओं के लिए कस्टम OAuth प्रोवाइडर बनाए जा सकते हैं:

⚠️ ज़रूरी जानकारी: ओआईडीसी (OpenID Connect) की सेवा देने वाली कंपनियों को इस्तेमाल करने से पहले, उन्हें आपके Firebase प्रोजेक्ट की पुष्टि करने की सेटिंग में कॉन्फ़िगर करना ज़रूरी है. Firebase कंसोल में, Authentication → साइन-इन का तरीका पर जाएं. इसके बाद, ज़रूरी क्रेडेंशियल (क्लाइंट आईडी, क्लाइंट सीक्रेट, जारी करने वाले का यूआरएल) डालकर, ओआईडीसी प्रोवाइडर को जोड़ें. आपको Firebase से मिले OAuth रीडायरेक्ट यूआरआई को, सेवा देने वाली कंपनी के डेवलपर कंसोल में भी रजिस्टर करना होगा. सेटअप करने के बारे में ज़्यादा जानकारी पाने के लिए, Firebase ओआईडीसी दस्तावेज़ देखें.

import FirebaseAuthSwiftUI
import FirebaseOAuthSwiftUI
import SwiftUI

struct ContentView: View {
  let authService: AuthService

  init() {
    let configuration = AuthConfiguration()
    
    authService = AuthService(configuration: configuration)
      .withOAuthSignIn(
        OAuthProviderSwift(
          providerId: "oidc.line",  // LINE OIDC provider
          scopes: ["profile", "openid", "email"],  // LINE requires these scopes
          displayName: "Sign in with LINE",
          buttonIcon: Image("line-logo"),
          buttonBackgroundColor: .green,
          buttonForegroundColor: .white
        )
      )
      .withOAuthSignIn(
        OAuthProviderSwift(
          providerId: "oidc.custom-provider",
          scopes: ["profile", "openid"],
          displayName: "Sign in with Custom",
          buttonIcon: Image(systemName: "person.circle"),
          buttonBackgroundColor: .purple,
          buttonForegroundColor: .white
        )
      )
  }

  var body: some View {
    AuthPickerView {
      Text("App Content")
    }
    .environment(authService)
  }
}