Тёмный
No video :(

Google Login with OAuth2 in NativeScript Tutorial 

Alex Ziskind
Подписаться 244 тыс.
Просмотров 6 тыс.
50% 1

Do you need to include social logins in your mobile apps? In this NativeScript tutorial, we're using OAuth2 and adding Google login to a simple app. This includes the current Google app setup on their developer console.
► Facebook login with NativeScript (older video) - • Facebook Login with Na...
► SHARE
Share this video with a friend to help them with their native JavaScript apps:
• Google Login with OAut...
Share the entire NativeScript playlist to help your friends with their native iOS and Android apps written with JavaScript:
• NativeScript Tutorials
► ASK
If you have a topic you want me to make a video about use #iscriptnative in the comments.
►LET'S CONNECT
Alex on Twitter: / digitalix
NativeScripting on Twitter: / nativescripting
► FREE + PREMIUM NATIVESCRIPT COURSES
nativescriptin...
Take 25% off any premium NativeScript course by using the coupon code RU-vid

Опубликовано:

 

5 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 83   
@AZisk
@AZisk 5 лет назад
I cover a bunch more on security in NativeScript in this course: nativescripting.com/course/securing-nativescript-applications
@AngryPsNerd
@AngryPsNerd 4 года назад
Hello Alex, thanks for all that great work, facebook is working fine for me but google just redirect to "google.com" after authorisation, i have done everything you did in the video but still i get redirected to google not my app. Can you help me please?? ** IOS Info.plist** CFBundleURLTypes CFBundleURLSchemes com.googleusercontent.apps.XXX **** configureOAuthProviderGoogle **** function configureOAuthProviderGoogle(): TnsOaProvider { const googleProviderOptions: TnsOaProviderOptionsGoogle = { openIdSupport: "oid-full", clientId: "XXX.apps.googleusercontent.com", redirectUri: "com.googleusercontent.apps.XXX:/auth", urlScheme: "com.googleusercontent.apps.XXX", scopes: ["email", "profile"] }; const googleProvider = new TnsOaProviderGoogle(googleProviderOptions); return googleProvider; } Also with android it redirects to the first page losing the state of the login, is there a way to control where to redirect after providing some data passed too??
@przemysawturek7093
@przemysawturek7093 4 года назад
I've got the same - redirected to google home page.
@abugsbunny
@abugsbunny 5 лет назад
Hi Alexander, thanks a lot for you video. Great job.
@pebito
@pebito 4 года назад
First and foremost, I really appreciate your contribution to the NativeScript community, Alexander! It's a huge help for indy developers, that's for sure. While it took some time to figure things out how OAuth2 works with Google based on this tutorial, I still have a question. On the Google Developers Console, when creating an OAtuh Client ID, Google says "If your app runs on multiple platforms, each will need its own client ID". Well, that's the primary reason we're building apps with NativeScript, right? So, should we generate two client IDs - one for Android and one for iOS - or can we just get away with one single Client ID? That's not really clear. If you could drop us an answer on that that'd be awesome. I also would like to encourage you to craft more videos on "logging in and authentication" because it's pretty much an essential part of almost every app out there, so the more hands-on tutorials the community has the merrier. Think of best practices, gotchas, etc. Again, thank you for your help! :)
@AZisk
@AZisk 4 года назад
You should really only need one client id. But if there is a provider that requires platform specific things, then you can do that in NativeScript too. Check out my videos on platform specific code
@MerooMaher
@MerooMaher 5 лет назад
Thank you so much for your vedios
@jeseeliezerbritoverdi6497
@jeseeliezerbritoverdi6497 4 года назад
Eres TU hermano!!! Lo mejor de lo mejor!!
@adilsaeed31
@adilsaeed31 5 лет назад
Hey Alex you are awesome you know what developer need actually. Can you just make a video for Microsoft azure login video with azure portal. Please it's really needed here
@ShubhamGupta-mx2hn
@ShubhamGupta-mx2hn 4 года назад
I did npm i , tns add but still says Module not found: Error: Can't resolve 'nativescript-oauth2'
@ShubhamGupta-mx2hn
@ShubhamGupta-mx2hn 4 года назад
Please help
@andresilva-cc
@andresilva-cc 4 года назад
@@ShubhamGupta-mx2hn See my answer there: stackoverflow.com/questions/62954572/error-importing-nativescript-oauth2-into-nativescript-vue-project/62963063#62963063
@GautamKumar-uideveloper
@GautamKumar-uideveloper 4 года назад
Hi, I love your video, can you please make a video on accessing Face I'd with NativeScript? This will be preety helpfull. Thanks
@billyurs1
@billyurs1 5 лет назад
Hi Alex, at Android after login it is redirecting to Google home page and loginwithcompletion is not returning and I am not able to get access token, please help me
@przemysawturek7093
@przemysawturek7093 4 года назад
I've got the same problem. - did you resolve this isue?
@Sir0Pip
@Sir0Pip 4 года назад
I'm also getting the same behavior for google authentication. Everything works well with Okta OAuth2, so the code seems right, but I just get google's home page and no return call. Nothing on the web about this that I can find. Any help would be appreciated!
@Sir0Pip
@Sir0Pip 4 года назад
I figured out the issue that results in this behavior. If the deep linking setup in the Android app is not working properly, then the user will be redirected back to the Google home page. You will need to fix the deep linking in your app for the redirect to work.
@ODEDBARTOV
@ODEDBARTOV 3 года назад
@@Sir0Pip What do you mean "deep linking in your app"? i am facing this problem and i couldn't fix it for a long time... i desperate, please help!!!
@corsaronero5619
@corsaronero5619 5 лет назад
Hi Alex. You are the number one. In your old plugin there Was the possibility to use it for generic provider different from google Facebook and microsoft. Is this option still valid for the new plugin oauth2. Thank you
@AZisk
@AZisk 5 лет назад
Yes, you can use a custom provider in the NativeScript OAuth2 plugin also. The instructions are on the npm page for the package
@rodionsolomonik1910
@rodionsolomonik1910 5 лет назад
Hi, thanks for your video. One question - how to get user profile info after login (name, email, photo etc) ?
@AZisk
@AZisk 5 лет назад
Once you have the token, you need to use that token with google’s user APIs
@pguti778
@pguti778 4 года назад
Very good!! Thank you!!!!!
@giraserakesh
@giraserakesh 5 лет назад
Thanks Alex. Can you please add a video on how to store confidential information within Naivescript application which cant be found after decompiling APK will be great? For example, common credentials to hit a rest web service to get data.
@AZisk
@AZisk 5 лет назад
There are ways to store sensitive data on the client, but there are no fool proof solutions AFAIK. Keeping your API keys on your own backend is best, if you have that option and then only store a short lived access token on the client. Or just use your own backend as a proxy to the third party API
@giraserakesh
@giraserakesh 5 лет назад
@@AZisk Found something on SO stackoverflow.com/questions/51975388/how-to-access-webpack-environmental-variables-in-nativescript
@byungseon
@byungseon 5 лет назад
Thank you!
@konstantin7795
@konstantin7795 5 лет назад
Thx it's a great video. What am I supposed to do when I want to have synced with website auth for google and other providers? Is it going to be a backend API service which will create users and their providers in DB?
@AZisk
@AZisk 5 лет назад
Thanks! Yes, you'll have to manage these user profiles yourself and sync them yourself.
@konstantin7795
@konstantin7795 5 лет назад
@@AZisk Yes! I did it! Got user-profiles synced with the website. Tokens from auth providers using to get the app tokens cause they had more expiration time about 1 year vs google tokens expired after 1 hour...
@JordanKingCanada
@JordanKingCanada 3 года назад
Thanks for the video. I am attempting to follow along but use idenityServer on localhost:5001. I change the redirectUri to 10.0.2.2:5001/Authentication/Login, but It does not redirect back to app after login. how should I set the urlScheme for this scenario?
@jesusdelangel2788
@jesusdelangel2788 4 года назад
Hello Alex, thank you for all your videos. I have a question, with this plugin i can make a oauth2 with spring boot? I`m really lost at this topic
@AZisk
@AZisk 4 года назад
I’m not familiar with spring boot. But this is a generic oauth 2 implementation so if spring boot is a provider, then yes
@kapilverma4468
@kapilverma4468 4 года назад
hello Alex sir , i just started native script and you made it easy for me I was trying to make a log in page, but for Android, it's asking for SHA 1 printout, there is no tutorial for that in native script ,I`m really lost in this
@AZisk
@AZisk 4 года назад
Welcome! Glad I could help you. There will be joyful moments and painful ones. If you think that the plugin you’re using isn’t working correctly or has a bug, please fill out a detailed issue report in the open source repo.
@kapilverma4468
@kapilverma4468 4 года назад
@@AZisk, it worked perfectly now while.. creating the API in Google API, it asked for SHA 1 printout for android . I was stuck there thanks for your videos and tutorial
@kapilverma4468
@kapilverma4468 4 года назад
@@AZisk sir please check issue no 50 in nativescript oauth2
@salemyaslem9792
@salemyaslem9792 5 лет назад
I think we should rename console to consoel
@maloplanet-ody62
@maloplanet-ody62 4 года назад
Hi Alexander ! Thx for the help, it was a really helpful tutorial. Do you plan on adding the connection with Spotify ? I've explored their documentation but it seems quite a bit complicated. Thx !
@AZisk
@AZisk 4 года назад
I didn’t plan on adding Spotify, but the plugin allows you to extent with a custom provider, and if Spotify uses OAuth2 , then that should work
@maloplanet-ody62
@maloplanet-ody62 4 года назад
@@AZisk Indeed, i didn't saw that, i'm gonna give it a try ! Thx :)
@sagargurao9035
@sagargurao9035 5 лет назад
#iscriptnative Hi alex, Thanks for your guidance , could you please share a video or thoughts on how to implement this with Microsoft
@michael_kh
@michael_kh 5 лет назад
Thanks)
@stefanaleksik4896
@stefanaleksik4896 4 года назад
Hey Alex awesome tutorial and even more awesome plugin. I just finished the implementation for a Facebook login and it works like a charm. Still I am confused how to get the userID so I can continue retrieving more data from Facebook. After a successful call I am getting accessToken, accessTokenExpiration... but not the userID as explained in the documentation.
@AZisk
@AZisk 4 года назад
Thanks! The only thing this plugin does is authorize you and give you a token. Once you have the token, it’s now your job to send that token to Facebook’s APIs to retrieve whatever data you need (limited to the scopes that you’re authorized for, of course)
@stefanaleksik4896
@stefanaleksik4896 4 года назад
@@AZisk Yes, I understand that part. But on Facebook is written that the response will also return a userID besides auth token. For every next call I need both of these parameters to retrieve aditional data from the provided scope.
@stefanaleksik4896
@stefanaleksik4896 4 года назад
The facebook documentation that I am referring to is the following. developers.facebook.com/docs/facebook-login/web
@chicotebelsonda5507
@chicotebelsonda5507 4 года назад
Hi Alex, Awesome tutorial. I have one question though. How can I redirect to a homepage or another page after a valid login on facebook or google? I did this this.$navigateTo(this.$routes.Home, { clearHistory: true }); inside in client.loginWithCompletion() on success but it doesn't work.
@RemyTicona
@RemyTicona 5 лет назад
Hello Alexander, I tested RU-vid data API and all is ok... However, I've tried to generate an accessToken and I receive an error: “Invalid grant_type: “ Is the authorization for offline access? Please help me
@mauriciomontiel5133
@mauriciomontiel5133 4 года назад
Hello Alex! Im from Argentina. I implemented successfully the GoogleLogin on Android, with Nativescript + Angular but something its wrong. When the View of the select count returns to the App, its doesnt navigates to any route. RouterExtension doesnt work. Could you help me please? Thanks!
@ivanmiskuf1663
@ivanmiskuf1663 4 года назад
Hey Alex, great tutorial, I use your plugin in my NativeScript app to sign in users with Facebook and Google and I have one question. When some user tries to sign in with Facebook for the very first time he needs to approve some permissions in the FB app. I use only 'email' scope and if user disables permission to access his email he would not be able to use my app. Is there a way how to re request missing user permissions in the FB app on next login? It looks like only option is to find the FB app on facebook and grant permissions manually.
@AZisk
@AZisk 4 года назад
That’s a great questions and a possible use case for sure. I haven’t had to deal with that, but maybe you could execute a programmatic logout when you detect that a login will fail. Would love to hear your results
@ivanmiskuf1663
@ivanmiskuf1663 4 года назад
@@AZisk I just tried that but it did not work. To make it work you have to add 'auth_type' parameter with value 'rerequest' to OAuth request like here stackoverflow.com/questions/26020187/re-asking-for-declined-facebook-permissions-auth-type-rerequest-does-not-work. Maybe it would be useful to add new method for it or add an boolean argument to existing login methods
@marklanham2485
@marklanham2485 4 года назад
Hi Alex, great video as always! Have you got any tutorials on how to login using a private authentication server, as in something other than Google or Facebook?
@AZisk
@AZisk 4 года назад
Thanks Mark! Every configuration will be a little different so in this case by case situation, I do consulting as well. We did just get identity server support in the plugin thanks to a community contribution.
@marklanham2485
@marklanham2485 4 года назад
@@AZisk Ok nice one, thanks Alex!
@stevenstheory
@stevenstheory 4 года назад
When trying to leverage programmatic extraction on an Android device, I get a screen that tells me to go back to my application, but nothing happens -- no token in my console, and the window stays open. Closing the window triggers rejection. How do I properly trigger a resolve after a user has been verified? Also, adding ':/auth' to the end of my redirectUri results in a 400 code: redirect_uri_mismatch
@stevenstheory
@stevenstheory 4 года назад
I've been trying all day to get this plugin to work... I'm not convinced it does.
@animadraw3658
@animadraw3658 4 года назад
Hi, i try to use this package for create my google authentication but i need the profile scope to send a valid token to my api but this scope dosn't work. Do you have a solution please ? :)
@AZisk
@AZisk 4 года назад
You will have to read the provider docs.
@joelnylund
@joelnylund 4 года назад
Hi Alex, this is a great video, if I want to use OAuth to login to a webservice, say I have a timesheet server that uses google oauth to authenticate with it, I want my android app to use google oauth to authenticate with my timesheet webaplication and get a token for my android app to then make api calls. Is this possible to do with your plugin?
@AZisk
@AZisk 4 года назад
Thanks Joel. Yes, it’s possible. You can use the plugin in custom provider mode and set it up to authorize against your own server. There is an example identity provider implementation that you can take a look at as an example
@matthewamarlin
@matthewamarlin 5 лет назад
Hi, thanks for the video. How am i supposed to manage the state of the logged in user? After redirecting back after the login, all state in the application seems to be lost. Yes, the callback is executed but i am not able to detect if the user is logged in already or not. I would like an AuthGuard to handle the detection for me, however i cannot simply check against the AuthService as the client is null. Am i supposed to manage the Access Token and Refreshing myself?
@AZisk
@AZisk 5 лет назад
Great question, Matthew. This plugin’s one and only purpose is to communicate with the auth server and get a token for you. Everything else you have to manage yourself, including maintaining the token somewhere.
@AngryPsNerd
@AngryPsNerd 4 года назад
Same issue with android right now as ios redirect to google, but android redirects to first page losing all acquired data from auth, Did you reach a solution man?? if so can you share it please?
@wojciechk965
@wojciechk965 4 года назад
Is this :/auth in redirectUrl routing path? I am trying to put there my own path but It doesn't get redirected to this. I am using angualar
@przemysawturek7093
@przemysawturek7093 4 года назад
Panie Wojtku - czy udało się Panu rozwiązać ten problem? Mam ten sam problem - po zalogowaniu nie powraca do aplikacji tylko na główną stronę google
@wojciechk965
@wojciechk965 4 года назад
After execute tnsOAuthLogin and successfully login I can't see component html just white screen on android. I am using Angular. Anyone met with this?
@ankurpatel6033
@ankurpatel6033 4 года назад
Hello I have some error in iPhone say safari does not connect this browser how can I solve it
@AZisk
@AZisk 4 года назад
Did you try running the demo projects in the GitHub repo?
@ankurpatel6033
@ankurpatel6033 4 года назад
@@AZisk yes
@rafanazarko7208
@rafanazarko7208 5 лет назад
Could you make a tutorial about connecting to MySQL database in NativeScript? Meaby you can introduce ORM for example mysql2 or sequelize?
@AZisk
@AZisk 5 лет назад
Thanks for the suggestion. I’ll look into sequelize - haven’t seen that one before but it looks pretty good
@rafanazarko7208
@rafanazarko7208 5 лет назад
@@AZisk It would be grateful. Connecting to database it's pretty hard for some people (eg. me 😄) but really necessary in most projects.
@zmastltd4493
@zmastltd4493 4 года назад
In nativescript webview google rest api calls not working. its given error at the time of credential shows 405 error. How to solve this issue?
@AZisk
@AZisk 4 года назад
You can’t use webview with google login - google doesn’t allow it. Use the flow that I show in the video
@zmastltd4493
@zmastltd4493 4 года назад
@@AZisk i used for google login to get access token form google developer console. which way i will get that call back url in native script?
@RemyTicona
@RemyTicona 5 лет назад
Hello Alexander for Android still open out of the app 😢😢😢😢😢
@AZisk
@AZisk 5 лет назад
Yep - both iOS and android use the system browser. This is by design. OpenId providers (like google) require this.
@vahidnajafi756
@vahidnajafi756 5 лет назад
Thank you, but I prefer this plugin: github.com/mkloubert/nativescript-social-login Because it uses native view within the app instead of opening a browser. But the bad side is it's not getting updated since last year. I'm not sure if it's compatible with the new AndroidX.
@AZisk
@AZisk 5 лет назад
The idea behind the NativeScript-OAuth2 plugin is that 1. It doesn’t use any heavy third party libraries as dependencies. 2. It allows you to customize and use any OAuth2 provider and 3. It implements OAuth2 with OpenId Connect PROPERLY. To implement this according to spec means opening the SYSTEM browser for auth instead of using a webview within the app. By the way, NativeScript-OAuth2 plugin allows both methods : in-app and system browser.
@if100032
@if100032 3 года назад
​@@AZisk hey, can you confirm that with NativeScript-OAuth2 we can create a google login with the fancy in-app view, that already presents the user with the logged in google accounts? I am currently evaluating the best options and it sounds like a combination of your plugin and apple sign in (plugin provided by eddy) is the best combination.
@talkofthetown2179
@talkofthetown2179 5 лет назад
facebook login I think is more relevant
Далее
Animated Hamburger Button | NativeScript Tutorial
18:44
ПРОСТИ МЕНЯ, АСХАБ ТАМАЕВ
32:44
Просмотров 1,4 млн
Почему-то хочется плакать
00:17
Просмотров 500 тыс.
7 Things to Know When Learning NativeScript
13:47
Просмотров 10 тыс.
i waited for years
10:44
Просмотров 37 тыс.
Google Maps JavaScript API Tutorial
27:27
Просмотров 1 млн
An Illustrated Guide to OAuth and OpenID Connect
16:36
Просмотров 584 тыс.
Mastering NativeScript Layouts - Brad Martin
18:31
Просмотров 12 тыс.
A New Vue for NativeScript
48:13
Просмотров 30 тыс.
World's 1st Coding Monitor
11:10
Просмотров 218 тыс.
Animated Action Bar in NativeScript Tutorial
26:09
Просмотров 8 тыс.
Smooth NativeScript Environment Setup on Mac
38:58
Просмотров 6 тыс.
ПРОСТИ МЕНЯ, АСХАБ ТАМАЕВ
32:44
Просмотров 1,4 млн