I am trying to integrate web API to get currently playing/recently played songs. But, I could not generate the token with the scopes (user-read-currently-playing, user-read-playback-state).
I followed this link as refrence of Spotify. https://developer.spotify.com/web-api/authorization-guide/
1 https://accounts.spotify.com/authorize/?client_id=[CLIENT_ID]&response_type=code&redirect_uri=https%3A%2F%2Fexample.com%2Fcallback&scope=user-read-currently-playing%20user-read-playback-state&state=34fFs29kd09
I am getting bellow HTML response.
<html ng-app="accounts" ng-csp="">
<head>
<meta charset="utf-8">
<title ng-bind="(title && (title | localize) + ' - ') + 'Spotify'">Spotify</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<base href="/">
<link href="https://d2d1dxiu3v1f2i.clou..." media="screen" rel="stylesheet">
<script async="" defer="" src="https://d2d1dxiu3v1f2i.clou..." sp-bootstrap=""></script>
<meta ng-non-bindable="" sp-bootstrap-data="">
</head>
<body ng-view=""></body>
</html>
Please help.
Thank you
It looks like you've slightly misunderstood the auth procedure - in the authorization code flow the first step is to present that page to your user. You can do this in an iframe, a popup, in the original window - however you like. Once the user has granted or declined permission on that page, they will be redirected back to your app using the redirect URI.
To complete the authorization code flow, you have to exchange the code you get in the redirect for an access token and a refresh token. To perform this exchange, you'll need the client server - which mustn't be stored in your web frontend. You'd need a backend that'll do the exchange and forward the user to your frontend with the access token. If you don't have a backend, you can use the implicit grant flow.
Hope that helps!
Hugh
Related
I am currently working on facebook sharing and it seems there aren't many topics on facebook sharing with C#. Trying to learn something...
I have Open Graph meta tags in one of razor views like below:
<head>
<meta name="viewport" content="width=device-width" />
<title>Hello World!</title>
<meta property="fb:app_id" content="************" />
<meta property="og:site_name" content="www.hello-world.com" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://hello-world.com/home/fbshare" />
<meta property="og:title" content="How are you doing today?" />
<meta property="og:description" content="Great to know you are doing fine." />
<meta name="author" content="Hello" />
<meta property="og:image" content="https://images.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers.jpg?w=940&h=650&auto=compress&cs=tinysrgb" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="420" />
</head>
For normal users I'd like to redirect them to somewhere else from this view like below:
#{Response.Redirect("Somewhere in my application")};
But I do not want to redirect the facebook scraper too. Is there anyway I can identify the facebook or facebook scraper user agent and If I found out that this is facebook user agent do not redirect him anywhere else redirect them from the view to somewhere else.
P.S: According to facebook official documentation I have to find facebook user agent and allow them scrape my Open Graph meta tags but I can't dig a way.
The Facebook crawler needs to be able to access your content in order
to scrape and share it correctly. Your pages should be visible to the
crawler. If you require login or otherwise restrict access to your
content, you'll need to whitelist our crawler. You should also exempt
it from DDoS protection mechanisms.
If content isn't available at the time of scraping, you can force a
rescrape once it becomes available by passing the URL through the
Sharing Debugger.
The Facebook crawler can be identified by either of these user agent strings:
facebookexternalhit/1.1
(+http://www.facebook.com/externalhit_uatext.php)
OR
facebookexternalhit/1.1
Have you tried:
var userAgent = HttpContext.Request.Headers["User-Agent"];
if (userAgent != null &&
userAgent.Contains("facebookexternalhit/"))
{
// Is a Facebook agent
}
else
{
// Is not a Facebook agent
}
Of course, in MVC you should never redirect from a view, only redirect from a controller or a filter.
I'm working on a site whose front end is in angularjs and backend in ROR , Same ROR API is used in an android app also . Now I have a situation here . I need to share my Web's post on the Social media like facebook , twitter and google plus . And along with the link to the single post there should be a small preview also (a preview of the post which crawls before posting e.g in facebook) .I did it using angular Plugins . But when it comes to Android side , what they share and what displays on Facebook is the Link only . Then i did some R&D and i came to know that it must be done on server side with social media meta tags . I did a little bit but it still no works . I'm stuck on it . Below is what i've done so far .
def show
#post = Post.find_by_permalink(params[:id])
respond_to do |format|
format.html
format.js
end
end
In My views posts/show.html.erb
<!DOCTYPE html>
<html>
<head>
<title> Shared Question</title>
<meta property="og:title" content="My Page" />
<meta property="og:description" content="A description of my page." />
<meta property="og:image" content="http://www.example.com/images/my_lovely_face.jpg" />
<!-- etc. -->
</head>
<body>
Here is the body
</body>
</html>
I just need to show a small preview whenever some user share my web post's link on any media
You are correct, you need to implement special open graph (and other) tags for the customized social sharing functionalities.
Keep in mind that e.g. facebook will cache your page.
So you may try https://developers.facebook.com/tools/debug/ to test your code without caching - the code itself looks fine.
Example Code:
Place this code between <head> and </head> with your other meta tags.
<meta property="og:title" content="Title">
<meta property="og:site_name" content="Name">
<meta property="og:url" content="URL">
<meta property="og:description" content="Description Text">
<meta property="og:type" content="article">
<!--- network Specific -->
<meta property="fb:app_id" content="AppID">
<meta name="twitter:card" content="app">
<meta name="twitter:site" content="#FernerJohannes">
If you want to target Twitter specifically here are their card-guidelines:
https://dev.twitter.com/cards/getting-started
You may also want to checkout: Open Graph validation for HTML5
You can set a custom image for you website to be shown in fb posts -
Add the OG XML to your html tag
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
Add these meta tags to set the custom image that OG will use
<meta property="og:image" content="url_to_image" />
You can try reading this for more insight.
Hopefully this helps.
Looking to set up a Twitter product card integrated through Shopify -- while the product info is populating in the validator preview and the got confirmation that the card was approved, there is no next step available. The help article that shopify provided instructs to use "catalog view" as next step however I haven't been able to access. Any insights?
https://docs.shopify.com/manual/configuration/store-customization/social-media/twitter/taking-advantage-of-twitter-cards
EDIT: If you're already able to view the proper card in the validator tool, then all that's left is to tweet out a link and see if it works!
--
It looks like Twitter has changed their Card Application & Validation pages since that Shopify article was written.
According to https://dev.twitter.com/cards/types/product, just copy and paste this code into your twitter-card snippet, and update it with your information.
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="#iHeartRadio">
<meta name="twitter:creator" content="#iHeartRadio">
<meta name="twitter:domain" content="iheart.com">
<meta name="twitter:title" content="24/7 Beatles — Celebrating 50 years of Beatlemania">
<meta name="twitter:image" content="http://radioedit.iheart.com/service/img/nop()/assets/images/05fbb21d-e5c6-4dfc-af2b-b1056e82a745.png">
<meta name="twitter:label1" content="Genre">
<meta name="twitter:data1" content="Classic Rock">
<meta name="twitter:label2" content="Location">
<meta name="twitter:data2" content="National">
Once you've done that, you can go back to the Validator Page (https://cards-dev.twitter.com/validator) to check that everything works the way it should.
I have an URL for the site but not for it's feed(s), which I want to parse.
How to
detect if site has an RSS/Atom feed(s)?
Look for the rel="alternate" type="application/rss+xml" link in the head section of the site's defalut page:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://someurl/feed/" />
<title>Some title</title>
</head>
As mentioned in this question How to check if a site has rss feeds
you need to download the page and check for a rel='alternate'.
You could also have a fallback to regex the page for any mention of a feed.xml or similar, should the first parse fail, if you want to be sure to find any possible link to a RSS/Atom. This would not be as certain to contain the RSS of the actual page, it could be a link to an outside RSS.
I lost my temper few days ago because of this simple problem. Can you help me on this?
I'm suppose, since it's written in the Linkedin JS API documentation here, to be able to logion with REST and launch calls with JSAPI :
https://developer.linkedin.com/documents/inauth-inevent-and-inui
Authorization Tokens
While the easiest method of authenticating a user for the JSAPI is to
use one of the login buttons, some sites have implemented the OAuth
1.0a flow used by the REST API. Whichever type of authentication you use for the user, the JSAPI will recognize that the member has already
logged in, as long as the key and hostname are the same. This happens
automatically, requiring no additional code by the developer.
But this is NOT working, I have this weird console error :
Cannot call method 'Profile' of undefined
when I call this right after REST auth:
IN.API.Profile("me").fields(["id", "..."]).result(linkedin_connect_save);
Any ideas?
That console error doesn't have anything to do with authentication - I'm guessing you're loading another javascript framework which is interfering with the LinkedIn framework and the IN object isn't getting properly loaded.
The following page works with a key that I've previously authenticated using REST in the same browser here: http://developer.linkedinlabs.com/tutorials/testing.html
<html>
<head>
<title>Connections App Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body class="yui3-skin-sam yui-skin-sam">
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: MY_API_KEY
onLoad: loadData
authorize: true
</script>
<script type="text/javascript">
function loadData() {
IN.API.PeopleSearch()
.fields("firstName", "lastName", "distance", "publicProfileUrl","pictureUrl")
.params({"keywords": "princess", "count": 10, "sort": "distance"})
.result(function(result) {
alert(JSON.stringify(result));
});
}
</script>
</body>
</html>
your code might call before js load..
include js before ur code..