I'm new to Twitter #anywhere. Is #anywhere login feature is intended to integrate our website with Twitter login? just like Facebook connect?
If yes, What is the callback url used for and what callback url should be provided?
I've tried to add this #anywhere login feature to my site and I'm testing it from a localhost / 127.0.0.1 site. I use the following code
twttr.anywhere(function (T) {
T("#twitter-login").connectButton({
authComplete: function(user) {
//triggered when auth completed successfully
alert('test login complete');
currentUser = T.currentUser;
var userInfo = document.getElementById('user-info');
userInfo.innerHTML =
'<img src="' + currentUser.data('profile_image_url') + '"/>'
+ currentUser.data('screen_name');
}
});
});
If I don't provide any callback url, after authorizing the user, Twitter give a
Sorry, something went wrong.
The provided callback url http://localhost:9000/ is not authorized for the client registered to 'http://127.0.0.1:9000'.
So then I provide a custom callback url with the following code
twttr.anywhere.config({ callbackURL: "http://127.0.0.1:9000"});
After adding that code, no error occurred but I ended up having two tabs opened of the same page. One is the page I use to login and the other one is the callback url page. And also the code inside the "authComplete:" section is not run, the alert is not shown.
Did I do anything wrong?
Thank you
Twitter #Anywhere users domains to authenticate the callback url.
For twitter server, 127.0.0.1 and localhost are two differente things. As your are using localhost as your callback url, try adding this domain on the authorized domains configuration on your app configuration att dev.twitter.com
Related
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.
I am using AUTH0 V9 API to host the login page on my website and use API to login user via AUTH0. I am using https://auth0.com/docs/libraries/auth0js document as a reference. I installed the auth0-js npm package via the following command
npm install auth0-js
Then initialized the AUTH0 via the following code
<script type="text/javascript">
var webAuth = new auth0.WebAuth({
domain: 'YOUR_DOMAIN',
clientID: 'YOUR_CLIENT_ID'
redirectUri: "http://localhost:3000/login",
responseType: "code",
responseMode: "form_post",
scope: "openid profile email",
});
</script>
Then I using login() method as following
webAuth.login({
realm: 'tests',
username: 'testuser',
password: 'testpass',
});
But this above login code is not working. It's redirecting me to some other URL and not to "http://localhost:3000/login" which I provided while initializing AUTH0 object.
This method also has a reference to "Custom Domain". Do I need to purchase AUTH0 subscription for managing V9 API or I am doing something wrong that's why I am getting the wrong redirect. Please help.
========
Some strange thing I discovered that the same code is working with my personal account but not with my client's business account.
The same code mentioned above worked with my personal account but not with my client's business account and the problem was that client had set up custom error pages in the tenant settings. Whosoever is working with custom login, please check out two things.
Your callback URL is exactly what you are mentioning in your custom login code via AUTH0 V9.
Custom error pages are off in the tenant settings. "Tenant settings -> General Pages -> Error".
I'm trying to setup a manual flow for Facebook login, as per the docs at: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/
I've got my test Facebook app working as expected, i.e., I can login using a private web browser window fine. The URL I'm using is:
https://facebook.com/v3.3/dialog/oauth?client_id=<app_id>&display=popup&response_type=token&redirect_uri=https://www.facebook.com/connect/login_success.html
Now within my React-Native app, I'm using react-native-inappbrowser-reborn to present a SFAuthenticationSession on iOS. As per their docs (at https://www.npmjs.com/package/react-native-inappbrowser-reborn), I'm doing the following:
const redirectUri = "https://www.facebook.com/connect/login_success.html"
const url = "https://facebook.com/v3.3/dialog/oauth?client_id="+appId+"&display=popup&response_type=token&redirect_uri=https://www.facebook.com/connect/login_success.html"
InAppBrowser.isAvailable()
.then(() => {
InAppBrowser.openAuth(url, redirectUri, {
// iOS Properties
dismissButtonStyle: 'cancel',
// Android Properties
showTitle: false,
enableUrlBarHiding: true,
enableDefaultShare: true,
})
.then((response) => {
// Only gets to this point if user explicitly cancels.
// So this does not trigger upon successful login.
})
// catch handlers follow
Using the above, my app correctly open up an in-app browser and I can login fine using a test user for my test app. Upon successful login though, I don't get redirected back to the .then completion handler. It just stays in the in-app browser view and I see the same message from Facebook that I see when logging in using a web browser. It says something like "Success. Please treat the url the same as you would a password", or something like that.
I may be missing something here, but I thought the purpose of passing redirectUri as an argument to openAuth was so that upon redirection to that URI, the completion handler would be triggered.
Question: How do I redirect back to the completion handler upon login success?
I think that you already have a solution but thought it might be useful for someone else facing this issue. If you don't have a solution so far follow my instructions:
You can't directly redirect back to your application using deep link, since Facebook will not call a link `like myapplicationname://mycustompath´. It's only possible to call links using the https-protocol (https://...).
The solution I'd suggest you to use is to redirect using your own API (Facebook -> Your API -> Deep Link Redirection). You will understand why this is required in the most of the real world applications at the end of the instructions.
Starting from your react-native app call the authorize endpoint of Facebook with a redirection to your application and set the global deeplink of your app as redirect uri.
InAppBrowser.close();
InAppBrowser.openAuth("https://graph.facebook.com/oauth/authorize?client_id=YOURCLIENTID&redirect_uri=https://YOURDOMAIN:PORT/auth/facebook", "{YOURAPPSDEEPLINKNAME}://{SOMEPATHYOUWANTTOEND}")
.then((response) => {
handleAuthorized(response, LOGINTYPE.FACEBOOK);
});
Now after login you'll be redirected to your API with the authorization code token as query parameter (e.g. https://YOURDOMAIN:PORT/auth/facebook?code=AVERYLONGCODESENTBYFACEBOOK)
Using this code token from the query parameter, you make another API Call to get the access_token for the user
{GET}: https://graph.facebook.com/v15.0/oauth/access_token?client_id=YOUR_CLIENT_ID&redirect_uri=https://YOURDOMAIN:PORT/auth/facebook&client_secret=YOUR_CLIENT_SECRET&code=AVERYLONGCODESENTBYFACEBOOK
Facebook's API will send you an answer as JSON with the access_token inside.
You can make another call using the access token of the user, to get the userId and the username
{GET}: https://graph.facebook.com/me?access_token=ACCESS_TOKEN_SENT_BY_FACEBOOK_IN_PREVIOUS_GET_REQUEST.
If you need the e-mail address for the user you have to make another call. Make sure you'd set the permission to read the e-mail address for your app on the developer portal of facebook.
The following request will return you the id, name and the email of the user
{GET}: https://graph.facebook.com/USERIDFROMPREVIOUSREQUEST?fields=id,name,email&access_token=ACCESSTOKEN
I think you want to save all these information to a database and create a session in order to keep the user logged in and therefore all the requests described will be useful for you in a real application.
After doing all the backend stuff, you're ready for the redirection using deep link. To do that, set a meta-tag to redirect the inappbrowser to your application:
<meta http-equiv="refresh" content="0; URL={YOURAPPSDEEPLINKNAME}://{SOMEPATHYOUWANTTOEND}" />
I'm new to Shopify,
I have to develop shopify app API using It's Shopify API in laravel 5.
I have created app in my Development store, but when I am trying to install it on store it's giving authentication error.
As per documentation when user click on install app it redirects to the application callback url with access code as 'code' parameter in url string.
by using this code we need to call verify request method to generate permanent Access Token.
When I'm trying to do this shopify is redirecting me to the callback url but there is no 'code' in list.
I have set callback url in my app which is my localhost url converted by ngrok url (http://36481603.ngrok.io) by using this url I am redirecting user to my API controller where I have below code...
$sh = App::make('ShopifyAPI');
try
{
$verify = $sh->verifyRequest(Input::all());
if ($verify)
{
$code = Input::get('code');
$accessToken = $sh->getAccessToken($code);
}
else
{
// Issue with data
}
}
catch (Exception $e)
{
echo '<pre>Error: ' . $e->getMessage() . '</pre>';
}
Please provide if there is a step-by-step documentation for new app development in shopify.
Thanks in advance.
By using this code we need to call verify request method to generate permanent Access Token..
I dont think you are right in this context, the verify request method does not generate access token but verifies the validity of the request.
Anytime anyone clicks on your app to install your app shopify appends four items to the query string which are code, signature, shop, timestamp.
You need to construct a url with the shop url to obtain the access token which in this case i dont know whether you are doing it write with your encapsulated method.
eg. $url = "https://{$shop}/admin/oauth/access_token".
And sending your apikey as client_id, api_secret as client_secret, and the code you obtained from the url as code to form and send as a post request to shopify to obtain the access token.
How do I ensure that a user is logged in before I render a view using loopback?
I can loggin in the front end using my angular app. But I wanted to block anonymous users from viewing the page.
I thought it would be a header, something like headers.authorization_token, but it does not seem to be there.
I am looking for something like connect-ensurelogin for passport, without having to use passport.
This is the $interceptor that solves your problem.
This code detects 401 responses (user not logged in or the access token is expired) from Loopback REST server and redirect the user to the login page:
// Inside app config block
$httpProvider.interceptors.push(function($q, $location) {
return {
responseError: function(rejection) {
if (rejection.status == 401) {
$location.nextAfterLogin = $location.path();
$location.path('/login');
}
return $q.reject(rejection);
}
};
});
And this code will redirect to the requested page once the user is logged in
// In the Login controller
User.login($scope.credentials, function() {
var next = $location.nextAfterLogin || '/';
$location.nextAfterLogin = null;
$location.path(next);
});
Here is one possible approach that has worked for me (details may vary):
Design each of the Pages in your Single Page Angular App to make at one of your REST API calls when the Angular Route is resolved.
Secure all of your REST API Routes using the AccessToken/User/Role/ACL scheme that LoopBack provides.
When no valid Access Token is detected on the REST Server side, pass back a 401 Unauthorized Error.
On the Client Side Data Access, when you detect a 401 on your REST Call, redirect to your Logic Route.
For the smoothest User Experience, whenever you redirect to Login, store the Route the User wanted to access globally
(localStore, $RootScope, etc.) and redirect back there when the User
Logs in and gets a valid Access Token.
Here is the LoopBack Access Control sample: https://github.com/strongloop/loopback-example-access-control