Open Closed

Social Media App Sign Up/In api Integration with Abp Commercial from Flutter Application using AuthServer Endpoints #7184


User avatar
0
ahmet.ulusoy created
  • ABP Framework version: v8.0.1
  • UI Type: MVC
  • Database System: EF Core (SQL Server)
  • Tiered (for MVC) or Auth Server Separated (for Angular): yes
  • Exception message and full stack trace:
  • Steps to reproduce the issue:
  • Solution: Microservice Template

Hello Dear ABP Support Team,

We successfully completed social media sign up/in for web applications with ABP commercial package, thanks to ABP Team. Now, we also want to add social media sign up/in from our mobile app. Our mobile application is developed with flutter and we completed everything except social media sign up/in.

Firstly, we want to integrate Google Sign Up/In like ABP Team like done in Web applications.

  1. We created OAuth consent screen descriptions in Google Cloud
  2. We created credentials for OAuth client id for application type: android
  3. We successfully integrated with given client id with our flutter application
  4. When we complete Google Sign In request in our flutter application google sends a response with Access Token and Hash Code

After that what we need to do, make it like Abp Commercial Social Media Sign Up/In in Web Applications?

We try to make everything flutter native, so, we can't use web view or embedded browser to show up a login/register page.

I tried to use identity server endpoints which are described in '.well-known/openid-configuration' but I couldn't find the right endpoint for token exchange or similar.

Can you support us on how we can integrate social media apps sign up/in with proper AuthServer endpoints?

Note: Our flutter app connects to a mobile gateway to access needed microservices. Our flutter app also can call some of the AuthServer endpoints which are 'token_endpoint', 'end_session_endpoint' and 'userinfo_endpoint' for authentication operations.

What we want to do is like below

  1. Login to Social Media App
  2. Get needed tokens
  3. Send the token/s needed endpoints
  4. Check the user for user has any registrations in our system
  5. Send user to registration page in our mobile app, complete sign up, login user without password or Login user without password

5 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    I think you should add Google as an external login on the AuthServer website. Then, use AuthServer as your mobile external login provider. You can create an oauth2 client in the OpenIddict Application page.

    Use code flow in your mobile.

    1. Mobile app redirects to authserver website.
    2. Select Google on the login page of the authserver website.
    3. Log in to your Google account or use your logic to create a new user on the authserver website.

    Check the user for user has any registrations in our system Send user to registration page in our mobile app, complete sign up, login user without password or Login user without password

  • User Avatar
    0
    fahad.kayani@alisco-it.com created

    Use code flow in your mobile.

    1. Mobile app redirects to authserver website.
    2. Select Google on the login page of the authserver website.
    3. Log in to your Google account or use your logic to create a new user on the authserver website.

    Hi I am also developing a flutter app with abp commercial at the backend, I am just curious at this part, we have the PKCE flow handled through the browser and external providers are handled there as well, but is there a way we can better the user-experience by keeping the user in-app like most apps do e.g. facebook, instagram,.

    things I have tried:

    • implemented in-app-webView but that has security concerns,

    • looked into password grant_type, but most of the articles and sources do not recommend this, and client_secret is saved on the native-app as well. A workaround to this: make a custom api which calls /connect/token with grant_type password on the backend, and returns access_token as a response to the initial call from native-apps,

    Would these be good approaches to this in your opinion or any other approach you recommend?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    You can refer to the professional document.

    https://oauth.net/2/native-apps/

  • User Avatar
    0
    fahad.kayani@alisco-it.com created

    hi

    You can refer to the professional document.

    https://oauth.net/2/native-apps/

    I did, no mention of the required guide, just PKCE mostly.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    We don't have much experience with mobile OAuth2.

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11