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

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

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

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

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

इंस्टॉल करना

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

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

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

    https://github.com/firebase/FirebaseUI-iOS

  3. डिपेंडेंसी का नियम मेन्यू में जाकर, अगले मेजर वर्शन तक चुनें. इसके बाद, नया वर्शन को कम से कम वर्शन के तौर पर सेट करें.

  4. पैकेज जोड़ें पर क्लिक करें. इसके बाद, वे लाइब्रेरी चुनें जिन्हें आपको अपने प्रोजेक्ट में जोड़ना है.

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

    • FirebaseAuthSwiftUI

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

    • FirebaseAppleSwiftUI (Apple से साइन इन करें)
    • FirebaseGoogleSwiftUI (Google से साइन इन करें)
    • FirebaseFacebookSwiftUI (Facebook से साइन इन करें)
    • FirebasePhoneAuthSwiftUI (फ़ोन से पुष्टि करना)
    • FirebaseTwitterSwiftUI (Twitter से साइन इन करें)
    • FirebaseOAuthSwiftUI (GitHub, Microsoft, Yahoo जैसे स्टैंडर्ड OAuth और OIDC प्रोवाइडर)

  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 कंसोल के सुरक्षा > पुष्टि > साइन-इन करने का तरीका सेक्शन में जाकर, ईमेल/पासवर्ड की सुविधा देने वाली कंपनी को चालू करें.

  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:) तरीके में लॉजिक जोड़ें. यह लॉजिक, true तब दिखाता है, जब खोला गया यूआरएल Firebase Authentication साइन-इन लिंक होता है. इस लॉजिक से पता चलता है कि लिंक को 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 पेज पर जाकर, अपने ऐप्लिकेशन के लिए 'Apple से साइन इन करें' सुविधा चालू करें.
    2. अपनी वेबसाइट को अपने ऐप्लिकेशन से जोड़ें. इसके लिए, वेब के लिए 'Apple से साइन इन करें' सुविधा को कॉन्फ़िगर करना लेख के पहले सेक्शन में दिए गए निर्देशों का पालन करें. जब कहा जाए, तब इस यूआरएल को रिटर्न यूआरएल के तौर पर रजिस्टर करें: 
      https://YOUR_FIREBASE_PROJECT_ID.firebaseapp.com/__/auth/handler
       आपको Firebase कंसोल सेटिंग पेज पर अपना Firebase प्रोजेक्ट आईडी मिल सकता है. इसके बाद, अपने नए सेवा आईडी को नोट कर लें. इसकी ज़रूरत आपको अगले सेक्शन में पड़ेगी.
    3. 'Apple से साइन इन करें' की निजी पासकोड बनाएं. आपको अगले सेक्शन में, अपनी नई निजी कुंजी और कुंजी आईडी की ज़रूरत पड़ेगी.
    4. अगर Firebase Authentication की ऐसी किसी सुविधा का इस्तेमाल किया जाता है जो लोगों को ईमेल भेजती है, तो Apple की Private Email Relay सेवा को कॉन्फ़िगर करें और noreply@YOUR_FIREBASE_PROJECT_ID.firebaseapp.com को रजिस्टर करें. ऐसा इसलिए, ताकि Apple, Firebase Authentication से भेजे गए ईमेल को, Apple के ईमेल पतों पर फ़ॉरवर्ड कर सके. इन ईमेल पतों में लोगों की पहचान ज़ाहिर नहीं की जाती. इन सुविधाओं में, ईमेल लिंक से साइन इन करने की सुविधा, ईमेल पते की पुष्टि करने की सुविधा, खाता बदलने की सुविधा रद्द करने की सुविधा वगैरह शामिल हैं. इसके अलावा, आपके पास ईमेल टेंप्लेट के डोमेन को रजिस्टर करने का विकल्प भी होता है.

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

    • पिछले सेक्शन में बनाया गया सर्विस आईडी डालें.
    • OAuth कोड फ़्लो कॉन्फ़िगरेशन सेक्शन में, अपना Apple Team ID, निजी पासकोड, और पिछले सेक्शन में बनाया गया कुंजी आईडी डालें.

  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 सेक्शन में जाकर, अपना ऐप्लिकेशन चुनें. इसके बाद, जानकारी टैब चुनें और यूआरएल टाइप सेक्शन को बड़ा करें.

    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 Login जोड़ें" को छोड़ दें.

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

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

    let authService = AuthService()
 .withFacebookSignIn()

फ़ोन नंबर

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

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

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

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

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

    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, GitHub, Microsoft, और Yahoo जैसी ओऑथ की सुविधा देने वाली कंपनियों के साथ-साथ, Firebase Authentication में कॉन्फ़िगर किए गए कस्टम ओआईडीसी की सुविधा देने वाली कंपनियों के साथ भी काम करता है.

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

कस्टम ओआईडीसी प्रोवाइडर के लिए, सबसे पहले 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. डिफ़ॉल्ट व्यू में फिर से पुष्टि करना

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

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

  • 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. MFA हैंडल करना: .mfaRequired के लिए SignInOutcome देखें और MFA की समस्या को मैन्युअल तरीके से हल करें
  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 प्रोवाइडर के अलावा, अन्य सेवाओं के लिए भी कस्टम OAuth प्रोवाइडर बनाए जा सकते हैं:

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

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)
  }
}