I want to show youtube channel live broadcast on my own website with YouTube Data API v3 - ajax

I have one website in pure HTML where I want to show YouTube live broadcast from my channel when I am live on YouTube.
$.ajax({
url: "https://www.googleapis.com/youtube/v3/liveBroadcasts?part=id%2C+snippet%2C+contentDetails&broadcastType=all&mine=true&key={my-key}",
type: "GET",
success: function (result) {
console.log(result);
}
});
when I am using above code it's showing me login required.
Is there any way I can show my channel live video without login?

$.ajax({
type: "GET",
url: "https://www.googleapis.com/youtube/v3/search?part=id,snippet&eventType=completed&channelId={YOUR-CHANNEL-ID}&type=video&key={YOUR-API-KEY}",
async:true,
crossDomain:true,
dataType : 'JSON',
success: function(data){
$.each(data.items,
function(i,item)
{
var app =
'<div>\
<iframe src="https://www.youtube.com/embed/'+item.id.videoId+'" width="100%" height="auto" allowfullscreen></iframe>\
</div>';
$('.container').append(app);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>
i found a work around without OAUTH2.0 using API KEY and channel-ID using search API of YT DATA API.
you can change the eventType to live and completed.
items.snippet.id.videoId for video id and items.snippet.title for title of video.
Read documentation https://developers.google.com/youtube/v3/docs/search/list

You will need to use Oauth2 authentication for that API it appears.
https://developers.google.com/youtube/v3/live/registering_an_application
The page allows you to create two different types of credentials. However, all of the methods for the YouTube Live Streaming API require OAuth 2.0 authorization. Follow the instructions below to generate OAuth 2.0 credentials.
OAuth 2.0: Your application must send an OAuth 2.0 token with any request that accesses private user data. Your application sends a client ID and, possibly, a client secret to obtain a token. You can generate OAuth 2.0 credentials for web applications, service accounts, or installed applications.
See the Creating OAuth 2.0 credentials section for more information.
API keys: You have the option of including an API key with a request. The key identifies your project and provides API access, quota, and reports.
Note that all of the methods for the YouTube Live Streaming API require OAuth 2.0 authorization. For that reason, you need to follow the instructions above for generating OAuth 2.0 credentials. If you want, you can also send an API key, but it is not necessary.

Related

Botframework WebChat: unable to start new and clean conversation on other chat/browser

I'm using webchat to make make a simple web interface for my bot. My bot has authentication using BotAuth to connect to an Azure Active Directory.
When I log in it works fine but when I start a new converstation on another device it contiues my conversation when it should be a new clean conversation.
I used this https://github.com/Microsoft/BotFramework-WebChat but I doesn't work
$.ajax({
type: "POST",
headers: {
"Authorization": "Bearer " + "yupOGxl-odA.cwA.USk.zul_EXUwk54fWqKT_N8hmsWyXSWo5DHMYj0r7DQjaZI"
},
url: "https://directline.botframework.com/v3/directline/tokens/generate",
}).done(function (response) {
console.log(response)
BotChat.App({
directLine: {
token: response.token
},
user: { id: 'userid' },
bot: { id: 'botid' },
resize: 'detect'
}, document.getElementById("bot"));
});
when I start a new converstation on another device it contiues my conversation when it should be a new clean conversation.
It seems that you’d like to generate and pass a Direct Line Token to initiate BotChat. In this section: “Secrets and tokens”, you can find "A Direct Line token is a key that can be used to access a single conversation".
If you generate a new token via Ajax request and use it to initiate BotChat every time when new user logged in, a new conversation should be started with that token, you can use browser network tool to check the conversationId in response of starting a conversation.
On the other hand, if you use same Direct Line Token on another device/browser client(or tab), it will access the same conversation.
I have 2 users in my bot and somehow when I use it I'm logged in as the other person
As JasonSowers mentioned in his comment, you are specifying same userid when you initiate BotChat, you had better to get current logged-in user’s id and dynamically pass it to BotChat user property.
Note: In your code, you make ajax request for generating token based on your Direct Line Secret on JavaScript client side, which still expose the Direct Line Secret. Others can easily get your Direct Line Secret by checking your JavaScript code then put your bot on their website. If possible, you can create a backend service and put the code logic for generating token on server-side, which would help hide your secret from client side.

How to get sign in with the ajax get request to MS?

I'd like to use MS Graph REST API, I use an ajax get request to sign in the user (https://developer.microsoft.com/en-us/graph/docs/concepts/rest). How should I do that? I get the response just don't know how it'll popup.
This is the sample code:
$.ajax({
method: "GET",
url: "https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=<app ID>&redirect_uri=http%3A%2F%2Flocalhost/myapp%2F&response_type=code&state=1234&scope=mail.read",
async: true,
cache: false,
dataType: "json",
complete: function(response){
console.log(response.responseText);
},
});
I think you have to redirect the user to that signin page, not just sending a GET request to it. The user is shown a consent screen where they can review the permissions your app is requesting.
Using an auth library is significantly easier than manually handling the redirect to login.microsoftonline.com. There's a guide for authenticating to Graph with MSAL (Microsoft Authentication Library) at https://learn.microsoft.com/en-us/azure/active-directory/develop/guidedsetups/active-directory-javascriptspa
MSAL will help parse the response after the user has consented and is redirected back to your app

Azure Authentication between two Web Apps

I've set up two Web Apps in Azure and both are backed by Azure AD Authentication.
One is the frontend and the second is the API backend. Opening every page on their own works well (Login screen), but calls made by the frontend to the backend results in being blocked by CORS policy. Message is:
XMLHttpRequest cannot load hxxps://backend.azurewebsites.com/api. Redirect from hxxps://backend.azurewebsites.com/api to hxxps://login.windows.net/94... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'hxxps://frontend.azurewebsites.net' is therefore not allowed access.
The call is made as follows:
$.ajax({
type: type,
dataType: 'json',
url: server + '/' + url,
crossDomain: true,
xhrFields: {
withCredentials: true
},
data: data
}
});
The API should not be sending back redirects when a call is unauthenticated. The caller can't do anything useful with that.
Instead you should setup Azure AD Bearer token authentication on the API, with Audience set to the APIs client id, and the Tenant set to your Azure AD tenant id/domain name.
Then your front-end should get an access token for the API somehow, and attach it to all calls going to it. There are multiple ways to do this.
Here you can find a sample Single-Page application: https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp.
More sample apps here: https://learn.microsoft.com/en-us/azure/active-directory/develop/active-directory-code-samples

Private REST API with Ajax call

How to authorize only my app to use my REST API ?
I have this code in Javascript
$.ajax({
type: 'DELETE',
url : 'removeTest',
data: { ... },
beforeSend:function(){
...
},
complete:function(){
...
},
success:function(data, textStatus, jqXHR){
...
}
});
This call will remove a user from the database with REST API in PHP. The problem is that everyone can remove a user, with POSTMAN (Chrome plugin) for exemple. How can I protect my REST API to authorize only my app.
Check the HTTP_REFERER is not enough. What could be better ?
Thanks for your help
You have several possibilities here. In general you could authorize the user, the app or both. This depends on your application requirements.
Authenticate Applications
To authenticate the application you could use a token based system, such as an API-Key. This means any request would be signed using additional request parameters. Take a look at the way amazon does this in their S3 service for example. If your application will be the only one that will access the rest API you could alternatively simply restrict the acces by the IP address.
If there will be multiple users using the service via your client, you may also need to authorize the access to certain functions. For example: Will every user be allowed to delete any resource? If the answer is no, you have to implement
Authenticate and authorize users
A simple way to authenticate users in a RESTful API is using HTTP Basic or Digest Auth. In this setting the user credentials are sent via the Authorization header in a form of username:password as Base64 encoded hash to the server. Please note that you should only do this via an secured connection using HTTPS!
Additionally you could also take a look at more complex/sophisticated practices like OAuth.

OAuth Protected API Accessible From Local Javascript Application

I apologize if this has been asked, and answered before, but I have hunted all throughout the site, tried about 2 dozen search combinations, Google, etc and still not hit an answer on this.
I am building a single page (Well, login/sign up pages will be static but otherwise) javascript application. I decided I wanted to take Twitter's approach and build an API for it, and consume that with the javascript application.
I am using Rails, and plan to use something along the lines of Versionist for the API, Authlogic, or custom, authentication system, and Doorkeeper for oauth.
So, how do I consume the API locally (Via the javascript application) but still protect it behind OAuth?
Here is the js OAuth2 library I'm using: https://github.com/andreassolberg/jso
It's been working very well for me.
Give info about your app:
jso_configure({
"your_app": {
client_id: "client id of the application your registered in your provider",
redirect_uri: "http://localhost:8080",
authorization: "https://www.your_app.com/oauth/authorize"
}
});
Then, when you need to, or when your app launches, authorize the user:
jso_ensureTokens({
"your_app": ["public", "write"]
});
And that's it, you'll now be able to send requests to your provider api:
$.oajax({
url: "https://api.your_app.com/v1/lala/rsvp",
jso_provider: "your_app",
jso_scopes: ["public", "write"],
jso_allowia: true,
dataType: 'json',
success: function(data) {
console.log("Response (your_app):");
console.log(data);
}
});
ps: I wouldn't use Authlogic, it's super old.

Resources