Flutter - 可以在沒有 firebase 的情況下使用 Google 登錄嗎？

Question

pub.dev 上有google_sign_in包，但它提供的用於設置應用程序的鏈接指向https://firebase.google.com/?platform=android ...

謝謝！

Answer 1

是的 ！ 你可以。

1. 在雲控制台中創建項目。
2. 創建 OAuth 2.0 clientId（通過使用包名稱對其進行限制）
3. 下載 JSON 並將其放在 android->app 文件夾中，就是這樣。

4. 執行 google_sign_in 包中的步驟而無需進入 firebase

   GoogleSignIn googleSignIn = GoogleSignIn( clientId:"xxxx.apps.googleusercontent.com");

clientId 是可選的 - 但在 flutter web 中是必需的

也請參考此以在沒有 firebase 的情況下進行flutter web google 登錄

Answer 2

有很多方法可以通過Google進行身份驗證。 這是其中之一，無需使用firebase。

1-在Google控制台中注冊您的應用

您必須按照以下步驟通過Google設置Android / iOS應用。

Android集成要訪問Google登錄，您需要確保注冊您的應用程序。 您需要啟用Google People API。

iOS集成首先，注冊您的應用程序。 打開Xcode。 您必須將其粘貼到Xcode中以正確注冊GoogleServices-Info.plist 。

從文件管理器中選擇GoogleServices-Info.plist ，然后將該文件拖到Runner目錄[my_project]/ios/Runner/GoogleServices-Info.plist 。 將出現一個對話框，要求您選擇目標，然后選擇“ Runner目標。 然后將下面的CFBundleURLTypes屬性添加到[my_project]/ios/Runner/Info.plist文件中。

<!-- Put me in the [my_project]/ios/Runner/Info.plist file -->
<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <!-- TODO Replace this value: -->
            <!-- Copied from GoogleServices-Info.plist key REVERSE_CLIENT_ID -->
            <string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
        </array>
    </dict>
</array>
<!-- End of the Google Sign-in Section -->

2-安裝google_sign_in插件

我們必須在第一步中安裝google_sign_in插件。 因此，轉到您的pubspec.yaml文件（在項目的根目錄中）並在dependencies:添加以下行dependencies:

google_sign_in: "^3.0.4"

注意：檢查最新版本。 我使用的是3.0.4，但您必須使用最新的版本才能保持最新版本的更新

3-使用GoogleSignIn對象

現在，我們必須設置GoogleSignIn對象以從Google身份驗證開始。

GoogleSignIn _googleSignIn = new GoogleSignIn(
   scopes: [
      'email',
      'https://www.googleapis.com/auth/contacts.readonly',
   ],
);

主要范圍是獲取只讀的聯系信息。 這個想法是檢查應用程序是否已經登錄（如果過去執行過與Google的身份驗證）。 因此，我們應該聽取“當前用戶”的任何更改。 為此，我們必須添加一個偵聽器以檢查這些更改：

    _googleSignIn.onCurrentUserChanged.listen((GoogleSignInAccount account) async {
      if (account != null) {
        // user logged
      } else {
        // user NOT logged
      }
    });

如果account != null該應用程序已登錄，您必須打開主屏幕（或流程的下一個屏幕）。 否則，您無需執行任何操作並等待用戶交互（稍后將看到UI）。 之后，您必須執行靜默登錄才能在沒有用戶交互的情況下進行登錄。 回調將在我們添加的上一個偵聽器中返回。 因此，為了執行靜默登錄，我們添加了以下代碼：

_googleSignIn.signInSilently().whenComplete(() => dismissLoading());

注意， signInSilently()返回一個Future，因此我們可以調用whenComplete(...)來知道該執行何時完成。 然后我們可以消除一些負擔。 這是完整的代碼：

  GoogleSignIn _googleSignIn = new GoogleSignIn(
    scopes: [
      'email',
      'https://www.googleapis.com/auth/contacts.readonly',
    ],
  );

  initLogin() {
    _googleSignIn.onCurrentUserChanged.listen((GoogleSignInAccount account) async {
      if (account != null) {
        // user logged
      } else {
        // user NOT logged
      }
    });
    _googleSignIn.signInSilently().whenComplete(() => dismissLoading());
  }

之后，我們必須創建一個函數，該函數按需執行signIn動作。 該函數將從UI調用（如果您正在其他類中使用它）。

  doLogin() async {
    showLoading();
    await _googleSignIn.signIn();
  }

我們只需使用await修飾符調用_googleSignIn.signIn()即可等待執行。 結果將被偵聽我們設置的上一個回調。

4-構建UI登錄按鈕

我們可以創建自己的登錄按鈕或在那里找到某個人。 我將在此處發布自己的實現（非常基礎的😂，但可以正常工作）

    var loginBtn = RaisedButton(
      onPressed: () => doLogin(),
      child: Text("Login G+"),
      color: Colors.primaries[0],
    );

當用戶點擊此按鈕時，它將調用我們先前定義的doLogin函數。

Answer 3

是的。 嘗試簽證 - https://github.com/e-oj/visa

這是 Facebook 身份驗證的示例（它還支持 google、twitch、discord 和 Github）：

import 'package:visa/auth-data.dart';
import 'package:visa/fb.dart';

class AuthPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /// Simply Provide all the necessary credentials
      body: FaceBookAuth().visa.authenticate(
          clientID: '139732240983759',
          redirectUri: 'https://www.e-oj.com/oauth',
          scope: 'public_profile,email',
          state: 'fbAuth',
          onDone: done
      )
    );
  }
}

和“完成”回調：

done(AuthData authData){
  print(authData);

  /// You can pass the [AuthData] object to a 
  /// post-authentication screen. It contaions 
  /// all the user and OAuth data collected during
  /// the authentication process. In this example,
  /// our post-authentication screen is "complete-profile".
  Navigator.pushReplacementNamed(
      context, '/complete-profile', arguments: authData
  );
}