We just released Appwrite 0.14, and among other excellent features, we also added Zoom OAuth2 support. This new feature will allow you to build applications with Zoom integrations quickly. In this article, we will learn to set up Zoom authentication in our applications using Appwrite. By the end of this tutorial, you will know that setting up Zoom OAuth using Appwrite is so easy that we can do it in a few minutes.
New to Appwrite
Appwrite is an open-source back-end-as-a-service that abstracts all the complexity of building a modern application by providing a set of REST and Realtime APIs for your core back-end needs. Appwrite takes the heavy lifting for developers and handles user authentication and authorization, databases, file storage, cloud functions, webhooks, and much more!
Prerequisites
To follow along with this tutorial, you’ll need access to an Appwrite project or permissions to create one. If you don’t already have an Appwrite server running, follow the official installation tutorial to set one up.
You will also need a Zoom account, and if you don’t have one, you can easily create one for free by visiting https://zoom.us.
Create a Zoom OAuth App
Once we have our Appwrite server up and running, we need to create a Zoom OAuth App from the Zoom App Marketplace.
To create the Zoom OAuth app, log in to your Zoom account in the marketplace and head over to https://marketplace.zoom.us/develop/create and click the Create button on the OAuth app.
Provide a suitable name for your App and choose the App Type to be User-managed app, and click on the Create button.
You will be redirected to your new app’s page, where you can find the Client ID and Client Secret. Copy the production Client ID and Client Secret as we’ll need them in the next step.
Enable Zoom in Appwrite
Next, switch to your Appwrite Dashboard and head over to Users →Settings. This is where we will set up the Zoom OAuth provider. Scroll to the end of the list and enable the Zoom OAuth provider. You’ll be asked to enter the App ID and App Secret from the previous step.
Next, copy the redirect URL from Appwrite’s Zoom OAuth Setting dialog and paste it to your Zoom App’s Redirect URL field for both development and production environments, as well as in the Add allow lists field. If your web application is running in a separate domain, you need to add that to the Add allow lists as well.
Implementing Sign In With Zoom in Your Project
Once you have set up Zoom OAuth credentials in the Appwrite console, you are ready to implement Zoom Sign In in your project. Let's see how we can do it on various platforms.
You can use our client SDKs for various platforms to authenticate your users with OAuth2 providers. Before you can authenticate, you need to add our SDK as dependency and configure it with an endpoint and project ID. To learn to configure our SDKs you can follow the getting started guide for each platform. The appropriate links are provided in each section below. Once you have the SDK configured, you can instantiate and call the account service to create a session from the OAuth2 provider. Below are the examples for different platforms to initialize clients and perform OAuth2 login.
Web
First you need to add a web platform in your project from the Appwrite console. Adding a web platform allows appwrite to validate the request it receives and also prevents cross origin errors in your browser. In the project settings page, click on Add Platform button and select New Web App. In the dialog box that appears, give a recognizable name to your platform and add the host name of your application.
Follow the Getting Started for Web guide for detailed instruction on how to use Appwrite with your web application.
const appwrite = new Appwrite();
appwrite
.setEndpoint('YOUR_END_POINT')
.setProject('YOUR_PROJECT_ID');
try {
await appwrite.account.createOAuth2Session(
"zoom",
"[YOUR_END_POINT]/auth/oauth2/success",
"[YOUR_END_POINT]/auth/oauth2/failure",
);
} catch (error) {
throw error;
}
Flutter
For Flutter, in Android, to properly handle redirecting your users back to your mobile application after completion of OAuth flow, you need to set the following in your AndroidManifest.xml file.
<manifest ...>
...
<application ...>
...
<!-- Add this inside the `<application>` tag, along side the existing `<activity>` tags -->
<activity android:name="com.linusu.flutter_web_auth.CallbackActivity" android:exported="true">
<intent-filter android:label="flutter_web_auth">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="appwrite-callback-[PROJECT_ID]" />
</intent-filter>
</activity>
</application>
</manifest>
You also need to add the Flutter platform in your project from the Appwrite console. Adding Flutter platforms allows appwrite to validate the request it receives and also prevents requests from unknown applications. In the project settings page, click on Add Platform button and select New Flutter App. In the dialog box that appears, select the appropriate Flutter platform, give a recognizable name to your platform and add the application ID or package name based on the platform. You need to follow this step for each Flutter platform you will build your application for.
For more detailed instructions on getting started with Appwrite for Flutter developers follow our official Getting Started for Flutter guide. Finally, you can call account.createOAuth2Session from your application as shown below.
import 'package:appwrite/appwrite.dart';
void main() async {
final client = new Client();
client
.setEndpoint('YOUR_END_POINT')
.setProject('YOUR_PROJECT_ID');
final account = Account(client);
try {
await account.createOAuth2Session(
provider: "zoom"
);
} catch (error) {
throw error;
}
}
Android
For Android, to properly handle redirecting your users back to your mobile application after completion of OAuth flow, you need to set the following in your AndroidManifest.xml file.
<manifest ...>
...
<application ...>
...
<!-- Add this inside the `<application>` tag, along side the existing `<activity>` tags -->
<activity android:name="io.appwrite.views.CallbackActivity" android:exported="true">
<intent-filter android:label="android_web_auth">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="appwrite-callback-[PROJECT_ID]" />
</intent-filter>
</activity>
</application>
</manifest>
You also need to add the Android platform in your project from the Appwrite console. Adding Android platforms allows appwrite to validate the request it receives and also prevents requests from unknown applications. In the project settings page, click on Add Platform button and select New Android App. In the dialog box that appears give your platform a recognizable name and add the package name of your application.
For more detailed instructions on getting started with Appwrite for Android developers follow our official Getting Started for Android guide. Finally, you can call account.createOAuth2Session from your application as shown below.
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.launch
import io.appwrite.Client
import io.appwrite.services.Account
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val client = Client(applicationContext)
.setEndpoint("https://[HOSTNAME_OR_IP]/v1") // Your API Endpoint
.setProject("5df5acd0d48c2") // Your project ID
val account = Account(client)
GlobalScope.launch {
account.createOAuth2Session(
activity = this@MainActivity,
provider = "zoom"
)
}
}
}
Apple
To capture the Appwrite OAuth callback URL, the following URL scheme needs to add to your Info.plist
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>io.appwrite</string>
<key>CFBundleURLSchemes</key>
<array>
<string>appwrite-callback-[PROJECT_ID]</string>
</array>
</dict>
</array>
You also need to add Apple platform in your project from Appwrite console. Adding Apple platforms allows appwrite to validate the request it receives and also prevents requests from unknown applications. In the project settings page, click on Add Platform button and select New Apple App. In the dialog box that appears select appropriate Apple platform tab and give your platform a recognizable name and add the package name of your application. For each supported Apple platform you need to follow this process.
For more detailed instructions on getting started with Appwrite for iOS developers follow our official Getting Started for Apple guide. Finally, you can call account.createOAuth2Session from your application as shown below.
import Appwrite
let client = Client()
.setEndpoint("[YOUR_ENDPOINT]")
.setProject("[YOUR_PROJECT_ID]")
let account = Account(client)
account.createOAuth2Session(
provider: "zoom"
){ result in
switch result {
case .failure(let err):
print(err.message)
case .success:
print("logged in")
}
}
Conclusion
Well, that’s all that is to set up Zoom OAuth-based authentication with Appwrite. It is straightforward using Appwrite to set up Zoom OAuth-based authentication in your application. Following resources can be handy if you want to explore Appwrite further.
Top comments (0)