トップに関する質問 flutterでflutter_appauthプラグインを使ってoauthログインを実装したい３

編集履歴

質問編集履歴

文言の修正

2020/04/07 13:09

投稿

sagme

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -60,7 +60,7 @@
-④　認証成功（戻るリンクは機能していない）
+④　認証成功した後のcallback画面（戻るリンクは機能していない）
 ![イメージ説明](e49baea76e74dadba40085822cc94b1c.png)
@@ -524,7 +524,9 @@
 ### 試したこと
+なぜ引数を渡してもresultが返ってこないのかを調べるため
-_loginFunc()の認証する部分の
+_loginFunc()の認証する部分↓の中で
 ```
@@ -546,7 +548,7 @@
 ```
-中で何が行われているのか確認しようとしましたが、どうやって確認したら良いか分からない状態です。
+何が行われているのか確認しようとしましたが、どうやって確認したら良いか分からない状態です。
@@ -554,7 +556,7 @@
-参照したサンプルコード [MaikuB/flutter_appauth](https://github.com/MaikuB/flutter_appauth) の中には、[flutter_appauth](https://pub.dev/packages/flutter_appauth) だけでなく
+参照したGitのサンプルコード [MaikuB/flutter_appauth](https://github.com/MaikuB/flutter_appauth) の中には、[flutter_appauth](https://pub.dev/packages/flutter_appauth) だけでなく
 [flutter_appauth_platform_interface](https://pub.dev/packages/flutter_appauth_platform_interface#-readme-tab-)の実装も含まれていましたが、この部分がどういう役割をしているのか、flutter_appauth の main.dart からどのように参照されて使われているのかが分かりません。

文言の修正

2020/04/07 13:09

投稿

sagme

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,11 +1,3 @@
-すみません、この質問の後半部分が無いですが、
-エラーメッセージとソースコードが消えてしまっているため、現在修正しています。
 ### 前提・実現したいこと

書式の改善

2020/04/07 13:05

投稿

sagme

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -566,6 +566,8 @@
 [flutter_appauth_platform_interface](https://pub.dev/packages/flutter_appauth_platform_interface#-readme-tab-)の実装も含まれていましたが、この部分がどういう役割をしているのか、flutter_appauth の main.dart からどのように参照されて使われているのかが分かりません。
 そのため、自分の書いた上記のコードにはflutter_appauth_platform_interfaceの実装が含まれていないので
 これが原因なのかなと思いますが、使い方が分からず困っています。

文言の修正

2020/04/07 13:05

投稿

sagme

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -32,7 +32,7 @@
-GitHubのコードを参照して実装しました。
+こちらのGitHubのサンプルコードを参照して実装しました。
 [MaikuB/flutter_appauth](https://github.com/MaikuB/flutter_appauth)
@@ -532,9 +532,43 @@
 ### 試したこと
-ここに問題に対して試したことを記載してください。
+_loginFunc()の認証する部分の
+```
+final AuthorizationTokenResponse result =
+          await _appAuth.authorizeAndExchangeCode(
+        AuthorizationTokenRequest(
+          _clientId,      // php-test
+          _redirectUrl,
+          serviceConfiguration: _serviceConfiguration,
+          scopes: _scopes),
+      );
+```
+中で何が行われているのか確認しようとしましたが、どうやって確認したら良いか分からない状態です。
+困っていることその②
+参照したサンプルコード [MaikuB/flutter_appauth](https://github.com/MaikuB/flutter_appauth) の中には、[flutter_appauth](https://pub.dev/packages/flutter_appauth) だけでなく
+[flutter_appauth_platform_interface](https://pub.dev/packages/flutter_appauth_platform_interface#-readme-tab-)の実装も含まれていましたが、この部分がどういう役割をしているのか、flutter_appauth の main.dart からどのように参照されて使われているのかが分かりません。
+そのため、自分の書いた上記のコードにはflutter_appauth_platform_interfaceの実装が含まれていないので
+これが原因なのかなと思いますが、使い方が分からず困っています。
@@ -542,4 +576,12 @@
+macOS Mojave
+Flutter 1.12.13+hotfix.5
-ここにより詳細な情報を記載してください。
+Tools • Dart 2.7.0
+説明が長くなってしまいましたが、どうぞよろしくお願いいたします。

文言の修正

2020/04/07 13:03

投稿

sagme

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -512,7 +512,17 @@
-```dart
+```php
+callback.php
+  // webアプリの名残でphpファイルに書いてあるが、php部分は無し。戻るリンクの中身は無い。
+  認証成功<br>
+  <a href="">戻る</a>

文言の修正

2020/04/07 12:41

投稿

sagme

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -422,7 +422,91 @@
 ```dart
+screen1.dart
+import 'package:flutter/material.dart';
+import 'package:http/http.dart' as http;
+import 'package:flutter_appauth/flutter_appauth.dart';
+//// widget ////
+class Screen1 extends StatefulWidget {
+  String api;
+  Screen1({Key key, this.api}): super(key: key);
+  @override
+  _Screen1State createState() => _Screen1State(this.api);
+}
+class _Screen1State extends State<Screen1> {
+  String _api;
+    _Screen1State(String api){
+    this._api = api;
+  }
+  @override
+  void initState() {
+    super.initState();
+  }
+    @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      resizeToAvoidBottomInset: false,
+      appBar: AppBar(title: Text('screen1'),),
+      body: Column(
+        children: [
+          Text('screen1'),
+          Text('$_api'),
+        ]
+      )
+    );
+  }
+}
 ```

文言の修正

2020/04/07 12:37

投稿

sagme

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -90,6 +90,10 @@
 ```
+Launching lib/main.dart on Android SDK built for x86 64 in debug mode...
+✓ Built build/app/outputs/apk/debug/app-debug.apk.
 I/flutter ( 5095): 1
 I/flutter ( 5095): 2
@@ -104,14 +108,334 @@
-```ここに言語名を入力
+```dart
+main.dart
+import 'package:flutter/material.dart';
+import 'package:http/http.dart' as http;
+import 'package:flutter_appauth/flutter_appauth.dart';
+import 'package:flutter_auth_login_app/screen1.dart';
+void main() => runApp(MyApp());
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: MyHomePage(title: 'Flutter Demo Home Page'),
+    );
+  }
+}
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key, this.title}) : super(key: key);
+  final String title;
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+class _MyHomePageState extends State<MyHomePage> {
+  final String _clientId = 'test001';
+  final String _redirectUrl = 'http://10.0.2.2:10081/…/callback.php' ;  // callbackのURL
+  final List<String> _scopes = <String>[
+    'openid',
+    'offline_access',
+  ];
+//  String _codeVerifier;
+//  String _authorizationCode;
+  String _accessToken;
+  String _refreshToken;
+  String _userInfo = '';
+  final FlutterAppAuth _appAuth = FlutterAppAuth();
+//  final TextEditingController _authorizationCodeTextController = TextEditingController();
+  final TextEditingController _idTokenTextController = TextEditingController();
+  final TextEditingController _accessTokenExpirationTextController = TextEditingController();
+  final TextEditingController _accessTokenTextController = TextEditingController();
+  final TextEditingController _refreshTokenTextController = TextEditingController();
+  final AuthorizationServiceConfiguration _serviceConfiguration =
+    AuthorizationServiceConfiguration(
+      'http://10.0.2.2:18080/…/auth',  // 認証エンドポイントのURL
+      'http://10.0.2.2:18080/…/token'  // トークンエンドポイントURL
+    );
+  @override
+  void initState() {
+    super.initState();
+  }
+  void _loginFunc() async {
+    // 認証とアクセス、ID、リフレッシュトークン取得を一度にやる場合
+    print('1');
-ソースコード
+    try {
+      print('2');   // ここまで流れて↓のresultに値が戻らないため、エラーになる
+      final AuthorizationTokenResponse result =
+          await _appAuth.authorizeAndExchangeCode(
+        AuthorizationTokenRequest(
+          _clientId,
+          _redirectUrl,
+          serviceConfiguration: _serviceConfiguration,
+          scopes: _scopes),
+      );
+      print('3');
+      // アクセス、ID、リフレッシュトークン格納
+      if (result != null) {
+        _accessToken = _accessTokenTextController.text = result.accessToken;
+        _idTokenTextController.text = result.idToken;
+        _refreshToken = _refreshTokenTextController.text = result.refreshToken;
+        _accessTokenExpirationTextController.text = result.accessTokenExpirationDateTime?.toIso8601String();
+      }
+      // API取得
+      print('4=$result');
+      if (result != null) {
+        print('4 in');
+        await _testApi(result);
+      }
+      // 画面遷移
+      print('5');
+      _gotoScreen1();
+    // エラー処理
+    } catch(e) {
+      print('e=$e'); //エラー時のメッセージ出力
+    }
+  }
+  // API取得
+  Future<void> _testApi(TokenResponse response) async {
+    final http.Response httpResponse = await http.get(
+        'http://10.0.2.2:18082/…/data',  // APIのエンドポイント
+        headers: <String, String>{'Authorization': 'Bearer $_accessToken'});
+    setState(() {
+      _userInfo = httpResponse.statusCode == 200 ? httpResponse.body : '';
+    });
+  }
+  // 画面遷移　screen1　API取得後に遷移する画面
+  void _gotoScreen1() {
+    Navigator.pushReplacement(
+      context,
+      new MaterialPageRoute<Null>(
+        settings: const RouteSettings(name: "/screen1"),
+        builder: (BuildContext context) => Screen1(api:_userInfo),
+      ),
+    );
+  }
+  // widget
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text(widget.title),),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            Padding(
+              padding: EdgeInsets.only(bottom: 40),
+              child: Text('アプリ初期画面'),
+            ),
+            FlatButton(key:null, onPressed: _loginFunc,
+              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(3.0)),
+              color: Color(0xFF4c6cb3),             // 群青色
+              child: Text('ログインページへ',),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}
 ```
+```dart
+```
+```dart
+```
 ### 試したこと

文言の修正

2020/04/07 12:35

投稿

sagme

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -68,17 +68,33 @@
+④　認証成功（戻るリンクは機能していない）
+![イメージ説明](e49baea76e74dadba40085822cc94b1c.png)
+⑤　↑の画面の×印をタップして画面を閉じてアプリに戻った所
+![イメージ説明](697e3ce4f8e1a09302664bb55cedf9cc.png)
+⑥エラーメッセージ（④の画面を手動で閉じたので、ソースコード中のresultに何も入らずエラーになった
+　エラー後もアプリは動いているが、その後の画面遷移はしていない
+![イメージ説明](909e6d8b30fd3c3d4ededd7947d52f6b.png)
 ```
-エラーメッセージ
+I/flutter ( 5095): 1
+I/flutter ( 5095): 2
+I/flutter ( 5095): e=PlatformException(authorize_and_exchange_code_failed, Failed to authorize: [error: null, description: User cancelled flow], null)
 ```

文言の修正

2020/04/07 12:14

投稿

sagme

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,3 +1,11 @@
+すみません、この質問の後半部分が無いですが、
+エラーメッセージとソースコードが消えてしまっているため、現在修正しています。
 ### 前提・実現したいこと
@@ -64,6 +72,10 @@
 ```
 エラーメッセージ