Google登錄及獲取Calendar信息

firebase方案（實際是一個三方登錄集成，由于是google的所以使用Google賬戶登錄以后可以使用google api）

firebase官網
使用firebase Auth集成并登錄
firebase創建項目后會在google cloud中創建并關聯項目，登錄成功后接著就可以按照下述方法使用google api獲取相應信息。

flutter中用到的插件：
firebase_auth
firebase_core
參考firebase flutter網站

在google開發者平臺構建項目（單獨集成）

進入Google Cloud登錄并注冊，之后按照提示構建項目。

進入Apis&Services->Credentials下點擊CREATE CREDENTIALS創建OAuth 2.0 Client IDs。（ios和android需分別創建）。

創建過程中根據提示android需要配置sha-1簽名證書，ios需要配置url scheme。

android需要配置簽名:

Android 怎么創建簽名文件和解析簽名文件

將生成好的簽名文件放到工程app文件夾下，與app的build.gradle平行,之后再app的build.gradle中做如下配置:

... android{...buildTypes {release {signingConfig signingConfigs.debug}debug {signingConfig signingConfigs.debug}}signingConfigs {debug {storeFile file("nearhubone.keystore")//簽名文件名storePassword "123456"//密碼keyAlias "nearhubone"//別名keyPassword "123456"//密碼}release {storeFile file("nearhubone.keystore")storePassword "123456"keyAlias "nearhubone"keyPassword "123456"}}... }

申請需要使用的api

點擊Google Cloud-APIs＆Services下的Enabled APIs&services，enable需要使用的api，如Google Calendar API。需要創建api key的則創建api key（非所有api都需要創建api key）。

集成到對于項目

Flutter中集成

需要使用的插件有：

google_sign_in//用于登錄

extension_google_sign_in_as_googleapis_auth//配合拓展google_sign_in用于提供api初始化需要的Client

googleapis//提供豐富的google api

Flutter使用 Google API
Flutter使用 Google API 英文

流程如下：

使用google_sign_in插件實現登錄

• serverClientId參數填寫OAuth 2.0 Client IDs里相對應的ClientId。
• 注意初始化配置中的scopes，這個scopes用于用戶授權范圍，只有填入的scopes才會顯示在用戶授權頁上并得到授權，否則api將會調用失敗。這個scopes的字段在api文檔里可得。如CalendarList get這個api在其文檔里的Authorization就可看到scope列表。

登錄的示例代碼如下:

import 'package:flutter/material.dart'; import 'package:google_sign_in/google_sign_in.dart';//登錄所需插件 import 'package:http/http.dart' as http; import 'dart:convert' show json;//配置google登錄 GoogleSignIn _googleSignIn = GoogleSignIn(// Optional clientIdserverClientId: '781114075503-2qscj6a0ahsqedt6cellol0ur7qij645.apps.googleusercontent.com',//授權范圍（用戶授權頁會提示用戶授權）scopes: <String>['email','https://www.googleapis.com/auth/contacts.readonly','https://www.googleapis.com/auth/calendar',//獲取日歷信息授權], );class SignInDemo extends StatefulWidget {const SignInDemo({Key? key}) : super(key: key);@overrideState createState() => SignInDemoState(); }class SignInDemoState extends State<SignInDemo> {GoogleSignInAccount? _currentUser;String _contactText = '';@overridevoid initState() {super.initState();//注冊登錄回調_googleSignIn.onCurrentUserChanged.listen((GoogleSignInAccount? account) {setState(() {_currentUser = account;});if (_currentUser != null) {_handleGetContact(_currentUser!);}});_googleSignIn.signInSilently();}//【非登錄必須流程】登錄后獲取用戶個人信息用于顯示 Future<void> _handleGetContact(GoogleSignInAccount user) async {setState(() {_contactText = 'Loading contact info...';});//通過http請求獲取用戶個人信息final http.Response response = await http.get(Uri.parse('https://people.googleapis.com/v1/people/me/connections''?requestMask.includeField=person.names'),headers: await user.authHeaders,//請求頭置入登錄成功信息);if (response.statusCode != 200) {setState(() {_contactText = 'People API gave a ${response.statusCode} ''response. Check logs for details.';});print('People API ${response.statusCode} response: ${response.body}');return;}//解析用戶信息final Map<String, dynamic> data =json.decode(response.body) as Map<String, dynamic>;final String? namedContact = _pickFirstNamedContact(data);setState(() {if (namedContact != null) {_contactText = 'I see you know $namedContact!';} else {_contactText = 'No contacts to display.';}});}String? _pickFirstNamedContact(Map<String, dynamic> data) {final List<dynamic>? connections = data['connections'] as List<dynamic>?;final Map<String, dynamic>? contact = connections?.firstWhere((dynamic contact) => contact['names'] != null,orElse: () => null,) as Map<String, dynamic>?;if (contact != null) {final Map<String, dynamic>? name = contact['names'].firstWhere((dynamic name) => name['displayName'] != null,orElse: () => null,) as Map<String, dynamic>?;if (name != null) {return name['displayName'] as String?;}}return null;}//登錄Future<void> _handleSignIn() async {try {await _googleSignIn.signIn();} catch (error) {print(error);}}//登出Future<void> _handleSignOut() => _googleSignIn.disconnect();//界面展示Widget _buildBody() {final GoogleSignInAccount? user = _currentUser;if (user != null) {return Column(mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[ListTile(leading: GoogleUserCircleAvatar(identity: user,),title: Text(user.displayName ?? ''),subtitle: Text(user.email),),const Text('Signed in successfully.'),Text(_contactText),ElevatedButton(onPressed: _handleSignOut,child: const Text('SIGN OUT'),),ElevatedButton(child: const Text('REFRESH'),onPressed: () => _handleGetContact(user),),],);} else {return Column(mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[const Text('You are not currently signed in.'),ElevatedButton(onPressed: _handleSignIn,child: const Text('SIGN IN'),),],);}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Google Sign In'),),body: ConstrainedBox(constraints: const BoxConstraints.expand(),child: _buildBody(),));} }

參考：
官方示例

獲取日歷信息

獲取日歷信息可使用兩種方式：

• 一種方式直接使用http請求，無需其他插件,只需在請求頭中添加登錄信息
  api查看官方文檔

import 'package:google_sign_in/google_sign_in.dart';... class SignInDemo extends State<SignInDemo> { ...GoogleSignInAccount? _currentUser;@overridevoid initState() {super.initState();//注冊登錄回調_googleSignIn.onCurrentUserChanged.listen((GoogleSignInAccount? account) {setState(() {_currentUser = account;});...});}...onGetCalendarClick(){handleGetCalendar(_currentUser);}...//獲取谷歌日歷列表信息（http方式）handleGetCalendar(GoogleSignInAccount user) async {final http.Response response = await http.get(Uri.parse('https://www.googleapis.com/calendar/v3/calendars/primary/events'),//api查看官方文檔headers: await user.authHeaders,//在請求頭中添加登錄信息);if (response.statusCode != 200) {print('Calendar API ${response.statusCode} response: ${response.body}');} else {final Map<String, dynamic> data =json.decode(response.body) as Map<String, dynamic>;debugPrint(data.toString());}}}

• 【推薦】另一種方式使用googleapis插件配合google登錄拓展插件extension_google_sign_in_as_googleapis_auth使用

由于googleapis初始化對應api時需要提供client，extension_google_sign_in_as_googleapis_auth插件可以配合google_sign_in提供client。

代碼如下:

import 'package:google_sign_in/google_sign_in.dart'; import 'package:extension_google_sign_in_as_googleapis_auth/extension_google_sign_in_as_googleapis_auth.dart'; import 'package:googleapis/calendar/v3.dart'; //獲取谷歌日歷列表信息（sdk方式）getCalendarEvent() async {var httpClient = (await _googleSignIn.authenticatedClient())!;var calendar = CalendarApi(httpClient);var calEvents = calendar.events.list("primary");calEvents.then((events) => {events.items?.forEach((event) => print("EVENT ${event.summary}"))});}

參考：
如何在flutter中使用google日歷api獲取一個月內的所有活動 (僅參考使用googleapis-CalendarApi部分)

獲取身份驗證后的 HTTP 客戶端

完整代碼參考：

google_sign_in_get_calendar_demo.dart

import 'package:flutter/material.dart'; import 'package:google_sign_in/google_sign_in.dart'; import 'package:extension_google_sign_in_as_googleapis_auth/extension_google_sign_in_as_googleapis_auth.dart'; import 'package:googleapis/calendar/v3.dart'; import 'package:http/http.dart' as http; import 'dart:convert' show json;//配置google登錄 GoogleSignIn _googleSignIn = GoogleSignIn(// Optional clientIdserverClientId: '781114075503-2qscj6a0ahsqedt6cellol0ur7qij645.apps.googleusercontent.com',//授權范圍（用戶授權頁會提示用戶授權）scopes: <String>['email','https://www.googleapis.com/auth/contacts.readonly','https://www.googleapis.com/auth/calendar',], );class SignInDemo extends StatefulWidget {const SignInDemo({Key? key}) : super(key: key);@overrideState createState() => SignInDemoState(); }class SignInDemoState extends State<SignInDemo> {GoogleSignInAccount? _currentUser;String _contactText = '';@overridevoid initState() {super.initState();//注冊登錄回調_googleSignIn.onCurrentUserChanged.listen((GoogleSignInAccount? account) {setState(() {_currentUser = account;});if (_currentUser != null) {_handleGetContact(_currentUser!);}});_googleSignIn.signInSilently();}//【非登錄必須流程】登錄后獲取用戶個人信息用于顯示Future<void> _handleGetContact(GoogleSignInAccount user) async {setState(() {_contactText = 'Loading contact info...';});//通過http請求獲取用戶個人信息final http.Response response = await http.get(Uri.parse('https://people.googleapis.com/v1/people/me/connections''?requestMask.includeField=person.names'),headers: await user.authHeaders,//請求頭置入登錄成功信息);if (response.statusCode != 200) {setState(() {_contactText = 'People API gave a ${response.statusCode} ''response. Check logs for details.';});print('People API ${response.statusCode} response: ${response.body}');return;}//解析用戶信息final Map<String, dynamic> data =json.decode(response.body) as Map<String, dynamic>;final String? namedContact = _pickFirstNamedContact(data);setState(() {if (namedContact != null) {_contactText = 'I see you know $namedContact!';} else {_contactText = 'No contacts to display.';}});}String? _pickFirstNamedContact(Map<String, dynamic> data) {final List<dynamic>? connections = data['connections'] as List<dynamic>?;final Map<String, dynamic>? contact = connections?.firstWhere((dynamic contact) => contact['names'] != null,orElse: () => null,) as Map<String, dynamic>?;if (contact != null) {final Map<String, dynamic>? name = contact['names'].firstWhere((dynamic name) => name['displayName'] != null,orElse: () => null,) as Map<String, dynamic>?;if (name != null) {return name['displayName'] as String?;}}return null;}//登錄Future<void> _handleSignIn() async {try {await _googleSignIn.signIn();} catch (error) {print(error);}}//登出Future<void> _handleSignOut() => _googleSignIn.disconnect();//獲取谷歌日歷列表信息（sdk方式）getCalendarEvent() async {var httpClient = (await _googleSignIn.authenticatedClient())!;var calendar = CalendarApi(httpClient);var calEvents = calendar.events.list("primary");calEvents.then((events) => {events.items?.forEach((event) => print("EVENT ${event.summary}"))});}//獲取谷歌日歷列表信息（http方式）handleGetCalendar(GoogleSignInAccount user) async {final http.Response response = await http.get(Uri.parse('https://www.googleapis.com/calendar/v3/users/me/calendarList/primary'),//api查看官方文檔headers: await user.authHeaders,//在請求頭中添加登錄信息);if (response.statusCode != 200) {print('Calendar API ${response.statusCode} response: ${response.body}');} else {}}//界面展示Widget _buildBody() {final GoogleSignInAccount? user = _currentUser;if (user != null) {return Column(mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[ListTile(leading: GoogleUserCircleAvatar(identity: user,),title: Text(user.displayName ?? ''),subtitle: Text(user.email),),const Text('Signed in successfully.'),Text(_contactText),ElevatedButton(onPressed: ()=>handleGetCalendar(user),child: const Text('getCalendarEvent http'),),ElevatedButton(onPressed: getCalendarEvent,child: const Text('getCalendarEvent'),),ElevatedButton(onPressed: _handleSignOut,child: const Text('SIGN OUT'),),ElevatedButton(child: const Text('REFRESH'),onPressed: () => _handleGetContact(user),),],);} else {return Column(mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[const Text('You are not currently signed in.'),ElevatedButton(onPressed: _handleSignIn,child: const Text('SIGN IN'),),],);}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Google Sign In'),),body: ConstrainedBox(constraints: const BoxConstraints.expand(),child: _buildBody(),));} }

pubspec.yaml

dependencies:flutter:sdk: flutterflutter_signin_button: ^2.0.0google_sign_in: ^5.1.0extension_google_sign_in_as_googleapis_auth: ^2.0.7googleapis: ^9.2.0googleapis_auth: ^1.3.1url_launcher: ^6.1.5dev_dependencies:flutter_test:sdk: flutterdrive: 1.0.0-1.0.nullsafety.1flutter_driver:sdk: flutterhttp: ^0.13.3flutter_lints: ^2.0.0

其他參考

Flutter: Use Google Calendar API — Adding the events to Calendar

將dart和flutter與Google Calendar API結合使用以獲取用戶日歷上的事件列表

總結

以上是生活随笔為你收集整理的Google登录及获取Calendar信息的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。