How to authenticate Shopify App using Laravel 5 - api

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.

Related

Social Login authentication in an API

I am using Microsoft Owin/Katana and implemented the social login authentication in a Web Forms and MVC application which is working perfectly.
I have a requirement to convert the implementation into an API (controllers). In my MVC application, I am calling this line of code inside the login controller,
HttpContext.GetOwinContext().Authentication.Challenge(properties, AuthenticationProvider);
The user is redirected to the login screen of the provider (i.e. Google, Facebook, Twitter).
I was hoping to achieve the following,
User call /api/login controller of my API and it checks the provider and then using the access key and secret key, it returns the login URL as string or JSON and the consumer of the API will redirect to that URl. This way the secret and access keys are not exposed and just the URL is returned.
The problem is that there is no way I am able to find to get the login request URL of the provider. The Challenge method is void and it just redirects the user which in case of an API is not acceptable.
I have used the following code in a Web API,
var properties = new AuthenticationProperties() { RedirectUri = this.RedirectUri };
if (UserId != null)
{
properties.Dictionary[XsrfKey] = UserId;
}
MessageRequest.GetOwinContext().Authentication.Challenge(properties, AuthenticationProvider);
HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.Unauthorized);
response.RequestMessage = MessageRequest;
return Task.FromResult(response);
When I call the API using Postman then it returns the whole HTML of the login page. When I call the API URL directly in the browser then it redirects to the login page correctly but I just want to return the Url of the provider and the consumer should redirect itself.
Is there any way to achieve this?

How to retrieve Stripe's Connect authorization code in react-native

I'm trying to setup oAuth for Stripe's Connect (Standard). In their setup documentation they say:
Step 1: Create the OAuth link To get started with your integration,
Your client_id, a unique identifier for your platform, generated by Stripe
Your redirect_uri, a page on your website to which the user is
redirected after connecting their account (or failing to, should that
be the case), set by you
Step 3: User is redirected back to your site After the user connects
their existing or newly created account to your platform, they are
redirected back to your site, to the URL established as your
platform’s redirect_uri. For successful connections, we’ll pass along
in the URL: The scope granted The state value, if provided An
authorization code. The authorization code is short-lived, and can be
used only once, in the POST request described in the next step.
The way I've implemented this is by sending the user to a React-Native WebView, and because this is a mobile application, a redirect_uri is not an option.
The problem is, I cant simply make a POST request to a url. there are user actions that must be taken inside of stripe, and ultimately stripe sends an authorization code to a redirect url.
So How can I obtain the authorization code that stripe doles out inside the WebView authorization process so I can finish the Stripe Connect user creation process?
You can use onLoadStart for WebView. Just check if the url from the synthetic event is what you specified in your stripe settings and handle accordingly.
onLoadStart={(syntheticEvent) => {
const { nativeEvent } = syntheticEvent;
if(nativeEvent.url.startsWith("YOUR_REDIRECT_URL"){
// your logic here
}
}}
Follow the steps
step 1 : login in mediator strip account, now open new tab and paste below url in new window and replace client id "ca_****" with the account which you want to connect with mediator account ( client id ), and hit the url
https://connect.stripe.com/oauth/v2/authorize?response_type=code&client_id=ca_************************&scope=read_write
step 2 : now press connect button and find the code from new url like
https://connect.stripe.com/connect/default/oauth/test?scope=read_write&code=**ac_**************************

Accessing SonarQube quality gate API for private projects

How do I access SonarQube quality gate API in case of a private project? I tried sending the "User token" for a user as Authorization Bearer token and Basic login. However, it did not work. The only way I can access it is from a browser when a user is logged in, i.e. login token is present. Accessing like that from Postman is also possible. How could I get the token, then and is that a right way to access the API?
Tokens are indeed the right way to access the API.
1) You can obtain a new token by going to
Administration > Security > Users under tokens (click the list icon) then enter a name and click Generate
Make sure to copy the token as you won't be able to see it once you close.
2) Postman has an option to generate code based on a request (click the "code" option). If it works through Postman, it should work in your code with the copied request.
3) As a last resort if it doesn't work, here is a Groovy function I wrote to send a Get request.
// Returns response of SonarQube web API call with admin auth in text format
def getFromApi(String getURL){
def Res = ("curl -u "+AuthenticationToken+": "+getURL).execute().text
if (Res){
return Res
}
else{
return "error"
}
}
For post request you just need to add -X POST before the authentication token. Modify it to suit your needs.
Hope it helps!

How do I get react-native-inappbrowser-reborn to trigger success upon successful Facebook login

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}" />

loopback protected routes/ensure login

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