I am trying to implement social login using keycloak in a react-native application and upon following official keycloak documentation I have hit a dead end.
I have correctly configured (according to documentation) the correct redirect URI.
Details-
1.created a new facebook app. Now I have two different web resources.
a.) An instance running keycloak server on a docker setup.
b.) A dummy web app on a different domain that I am redirecting to using my react native code. I am using react-native-login package and the configuration which goes into their Login.start(config) method is attached below.
2.The website uri is the facebook app setting is same as the redirect uri that keycloak provides upon adding an identity provider.I have double checked my app id and app secret
and switched the app to production by giving it a privacy policy on the dummy express aplication I am trying to redirect to.
3.The keycloak server and the dummmy express app I have are on different domains (I don't see any problems with this but the tutorial I was following had the website and the keycloak server on the same domain with different sub domains could this be the problem).
The error
{
"error": {
"message": "Can't load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and sub-domains of your app to the App Domains field in your app settings.",
"type": "OAuthException",
"code": 191,
"fbtrace_id": "Awr-3dCV3zr"
}
}
config object
const config = {
url: "https://authserver.ml/auth",
realm: "Demorealm",
client_id: "demoFrontEnd",
redirect_uri: "https://dummyapp.ml/privacypolicy",
appsite_uri: "https://dummyapp.ml",
kc_idp_hint: "facebook",
};
website URI in facebook = redirect uri by keycloak (according to keycloak documentation)
added both the domains in the domains section of facebook app settings under the basic tab.
In the Share Redirect Domain Allow List section in advanced settings in facebook app I have added both the URI's ie. the authentication broker url from keycloak and the uri I am trying to redirect to after a successful login but I get this error everytime
Another scenario I have noticed is when I try to give the react-native-login config object a redirection uri that is mentioned in keycloak I get the invalid parameter error from keycloak
NOte- the error is arising from facebook's graph api which means that the authentication request went past the keycloak server and to facebook (https://graph.facebook.com/oauth/authorize?scope=email&state=rest of the url)
Any suggestions at this point will be much appreciated.
Related
I've followed the steps google has provided for integrating sign-in, provided here: https://developers.google.com/identity/sign-in/web/sign-in within my MERN stack application.
The button that I've created, correctly redirects to the google authentication site. However, after the user is authenticated with google, the google authentication site is closed and no redirection occurs. I'm expecting to be redirected to http://localhost:3000/profile after a user is authenticated.
I've set Authorized JavaScript origins to http://localhost:3000 and Authorized redirect URIs to http://localhost:3000/profile.
How can I update my code to have this redirect as expected?
If your code for authorizing with google lives in your server file, wich is running on a diffrent port than port 3000 you should set your JavaScript origins to the port of the server. Not the port of your react app.
This article covers the whole proces of using oAuth in the MERN stack step by step: https://medium.com/#maartendebaecke2/mern-stack-implementing-sign-in-with-google-made-easy-9bfdfe00d21c
I recently built a Vue.js application with Okta authentication. I am attempting to deploy this application on Netlify. After setting up a new project in Netlify, I imported the Vue.js application into the Netlify project from GitHub. I reconfigured the router in the application so that redirect_uri in the Okta initializer reflects the new Netlify URL:
import Auth from "#okta/okta-vue";
Vue.use(Auth, {
issuer: "https://xxx-xxxxxx.okta.com/oauth2/default",
client_id: "xxxxxxxxxxxxxxxxxxxx",
redirect_uri: "https://xxxxxxxxx-xxxx-xxxxxx.netlify.com/implicit/callback",
scope: "openid profile email"
});
After deploying the application and clicking the login button, I should be redirected to the default Okta login page. However, I am instead redirected to a page that says "page not found: Looks like you've followed a broken link or entered a URL that doesn't exist on this site."
I even made sure to whitelist that URL in my Okta dashboard. Any idea why Netlify doesn't recognize the new redirect_uri? Thanks!
Since you're deploying a SPA, you need to route all routes to your index.html and let Vue handle them.
According to this article, you need to add a _redirects file to your publish directory with the following line to take advantage of browser history pushstate:
/* /index.html 200
For more info, see Netlify's docs.
I solved the CORS issue. In the Okta Dashboard, I added the redirecting URL as an original URL under API > Trusted Origins. I selected Add Origin to specify the base URL of the website, then selected CORS. See : https://support.okta.com/help/s/article/CORS-error-when-accessing-Okta-APIs-from-front-end
We have an on-prem asp.net core app that leverage AAD for authentication, the app is setup to run in both:
http://domainserver/app
&
https://domainserver/app
In Azure AD the reply url for the application is setup as
http://domainserver/app/signin-oidc & https://domainserver/app/signin-oidc
When using http url, the sign-in process works fine, however in https mode, we get the following error:
AADSTS50011: The reply address ‘https://domainserver/app/signin-oidc’
does not match the reply addresses configured for the application:
appguid . More details: not specified
The reply https url is setup in AAD for the App exactly as it appears in the error message, so I’m not sure why it says it’s not matching.
One reason I can think of is that the SSL certificate used for https is a local domain signed certificate, and somehow it’s causing the error. But I’m not sure if that’s the case since AAD is just responsible to redirect back to the specified url, should not really care or know about the validity of the SSL.
Here is the image showing the setting url, the redirect url and the error message url matches exactly. You just have to trust me the part that's blocked out are also the same. :)
Anyone got any ideas why this happens?
Protocol matters. Azure AD will treat http://website.com and https://website.com as different reply URLs. However Azure can only let your put in multiple Reply URLs in a same domain. There is a case solution may be helpful to you:
Issue: Using the Azure AD authentication option to sign into the Skype for Business (SfB) Web SDK and you are seeing an AAD error page . The error page should have this message:
"AADSTS50011: The reply address 'https://...' does not match the reply
addresses configured for the application <...>"
Solution:
You need to configure the main domain name where you're hosting your app as a reply URL in the AAD registration for your app and pass it as the redirect_uri when redirecting to AAD to allow the user to sign in.
You should be using code like this to redirect the user to enter her credentials to sign into Azure AD:
var href = 'https://login.microsoftonline.com/common/oauth2/authorize?response_type=token&client_id=';
href += client_id + '&resource=https://webdir.online.lync.com&redirect_uri=' + window.location.href;
window.location.href = href;
Note In the code above that we are using window.location.href as the value of the redirect_uri query parameter in forming the URL of the AAD endpoint where the user will sign in. This parameter tells AAD to redirect the client browser and the access token obtained by signing into AAD back to the page we're currently on - the main app page. However, AAD will only redirect the access token to URLs that are specified as Reply URLs in the app registration in AAD.
Follow these steps to check your configured Reply URLs and add additional ones:
Sign into portal.azure.com with an account that's an administrator on your tenant.
Navigate to Azure Active Directory in the left side bar > App registrations > Your app > All settings > Reply URLS.
Type the domain name where you're hosting your app and click Save.
This solution is from this document.
Update
According to your screenshot, your Reply URI is different:
https://domainserver/app/signin-oidc
is not in your Reply URL list,
in your Reply URL list is
https://domainserver/app/signin-odic
Go to change them as same URL .
I am using a custom local URL for development of a project that authenticates with both Google and Adwords using OAuth2.
The entry in my /etc/hosts file looks like:
127.0.0.1 sub.example.dev:3001
In the Google Cloud Platform console I have an OAuth 2.0 client ID setup with:
type: Web Application
Authorized JavaScript origin: http://sub.example.dev:3001
Authorized redirect URIs:
http://sub.example.dev:3001/auth/adwords/callback
http://sub.example.dev:3001/auth/google/callback
I authenticate with with both Google and Adwords separately. Previously I was using localhost:3001 instead of the custom URL which was working for both Google and Adwords. After switching to the custom local URL the Google auth still works, but when I try to authenticate with Adwords I get a redirect_uri_mismatch error.
The error page tells me that "The redirect URI in the request, sub.example.dev:3001/auth/adwords/callback, does not match the ones authorized for the OAuth client." The URI reported here is exactly the same as what I have as an authorized redirect URI (minus the protocol).
Why does this work with Google OAuth, but not Adwords? How can I get a custom local redirect URL to work with Adwords OAuth?
Thanks!
I found the issue, and there was a hint in the question itself. The redirect URL that I pass during the OAuth flow needs to contain the protocol and I had missed that in my config.
The redirect URL I was passing in the OAuth flow was sub.example.dev:3001/auth/adwords/callback
I changed it to http://sub.example.dev:3001/auth/adwords/callback and now it works! :D
I am trying to access YouTube API using ASP.net MVC 4.
Should I use :
Client ID for web application or Client ID for native application?
I tried both:
Using Client ID for web application will give me this error: The redirect URI in the request: http://localhost:55193/authorize/ did not match a registered redirect URI
Using Client ID for native application will redirect me to this page with a token: http://localhost:55318/authorize/?code=4/ufFRXOfT7GS28wg_eqA9pQ9wVtFN.cgyV3VCJtGkXdJfo-QBMszsijcV9jQI
I am confused of google limited documentation.
If you're building a WebApp, you should use the client ID for web application. The error messages you're seeing indicate that your app is configured to, after authorizing, redirect to the URLs you see there, but you haven't set, in the console, the permissions to let those URLs handle callbacks.
Visit the developer console (https://console.developers.google.com/) and find your project, then choose the "credentials" link under the APIs & Auth section. Look for the client ID that you're using, and edit it; there will be a field to put in your allowed redirect URIs (in other words, the permissible places that your oAuth calls can redirect to after visiting google's auth endpoints).