将用户重定向回flutter应用程序以重置数据库密码

Question

一般来说，我对supabase、flutter和编程相当陌生。我正在努力实现以下目标:

当用户轻按"重置邮件"时链接，他们被重定向回我的Flutter应用程序，但不是SetNewPasswordScreen。我如何确保用户被重定向到SetNewPasswordScreen ?

总之，这是我试图实现的用户流程:

1. 用户在ForgotPasswordScreen上提交电子邮件地址
2. 用户收到邮件
3. 用户轻按"重置邮箱";邮件链接
4. 用户被重定向到SetNewPasswordScreen

以下呼叫触发密码重置邮件发送给用户:

final response = await supaClient.auth.resetPasswordForEmail(email,
redirectTo: kIsWeb
? null
: 'io.supabase.pickleballislife://forgotpassword-callback/');

在我的ios/Runner/Info。在plist文件中，我插入了以下块:

<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLSchemes</key>
<array>
<string>'io.supabase.pickleballislife://forgotpassword-callback/'</string>
</array>
</dict>
</array>

在我的android/app/src/main/AndroidManifest.xml文件中，我插入了以下代码块:

<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<!-- Accepts URIs that begin with YOUR_SCHEME://YOUR_HOST -->
<data
android:scheme="io.supabase.pickleballislife"
android:host="forgotpassword-callback" />
</intent-filter>

SetNewPasswordScreen的路由:

static const ROUTE_NAME = '/forgotpassword-callback';

，我在我的路由中这样定义了它:

SetNewPasswordScreen.ROUTE_NAME: (BuildContext context) {
return SetNewPasswordScreen();
},

在我的ForgotPasswordScreen上，我设置了以下AuthChangeEvent监听器:

@override
void initState() {
super.initState();
final _authSubscription = supaClient.auth.onAuthStateChange.listen((data) {
final AuthChangeEvent event = data.event;
if (event == AuthChangeEvent.passwordRecovery) {
goToNamed(
SetNewPasswordScreen.ROUTE_NAME,
replace: true,
);
}
});
_authSubscription.cancel();
}

我如何确保一旦用户点击"重置密码"链接，他们会被重定向到SetNewPassword屏幕，而不仅仅是我的手机应用程序?

Answer 1

您的plist文件应该只包含io.supabase.pickleballislife，因为这是您的方案

<key>FlutterDeepLinkingEnabled</key>
<true/>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLSchemes</key>
<array>
<string>io.supabase.pickleballislife</string>
</array>
</dict>
</array>

那么你就不去io.supabase.pickleballislife://forgotpassword-callback/了，你可以去io.supabase.pickleballislife://callback/forgotpassword。关键是我们现在重定向到/forgotpassword路径。BTW，有forgotpassword-callback作为主机没有什么问题，但它可能会令人困惑，所以我把它改成了callback。你可能也想在Android上更新设置。

现在你可以使用GoRouter设置你的路由，

GoRouter(
routes: [
...
GoRoute(
path: '/forgotpassword',
builder: (context, state) => SetNewPasswordScreen(),
),
],
);

你还需要在iOS和Android端设置一些额外的配置来启用Flutter深度链接。你可以在这里找到说明。

有了这个，你应该能够调用以下命令，用户将被重定向到密码重置页面!还要记得更新Supabase仪表板上的URL配置，以接受io.supabase.pickleballislife://callback/forgotpassword/作为额外的URL。

final response = await supaClient.auth.resetPasswordForEmail(email,
redirectTo: kIsWeb
? null
: 'io.supabase.pickleballislife://callback/forgotpassword/');