Это видео недоступно.
Сожалеем об этом.

How the Heck Do API Keys Work?

Поделиться
HTML-код
  • Опубликовано: 12 май 2020
  • This tutorial explains the logic behind API keys as well as providing a practical code demonstration of multiple ways to implement API keys in both the clientside JavaScript and in the backend with NodeJS and Express.
    Code Repo from video: github.com/pro...
    Express JS tutorial playlist: • Quickstart with Expres...

Комментарии • 80

  • @mazvitaselemani
    @mazvitaselemani 5 месяцев назад

    As someone who needs a step by step VISUAL walk through to understand concepts, this video was such a life saver. Thanks Steve, you've got a new subscriber!

  • @averagejoe5822
    @averagejoe5822 10 месяцев назад +1

    This was very useful. It took me a long time to find a resource this useful so I appreciate you making this content.

  • @tmhugin8312
    @tmhugin8312 2 года назад +2

    man allow me to say, you have a really charming voice, it really gets me listening. Amazing tutorial voice

  • @simasgradeckas4259
    @simasgradeckas4259 2 года назад +2

    Thanks for all this great content Steve! I really have no clue how only 24k people have stumbled upon this video. Such a great & thoughtful tutorial for beginners.

  • @amitbiswas1885
    @amitbiswas1885 4 года назад +7

    Thank you Steve. You are really a good human.

    • @kebman
      @kebman 3 года назад

      Plot twist: He's actually an AI!!11

  • @maxtayebwa8987
    @maxtayebwa8987 4 года назад +2

    I have looked for this very topic for a very long time. Thanks Prof, you have saved me!

  • @surinology
    @surinology Год назад

    Love your explanation and I have subscribed to your channel, wondering also why you dont have at least 500k subs not fear, you're too good, after 2 years this still helping lots of people. Thank you

  • @Maccelerate
    @Maccelerate 4 года назад +1

    Trying to build my SO's website. This is a boon, thanks man.

  • @takshpatel8109
    @takshpatel8109 3 года назад

    Useful Knowledge and good teaching => 100% likes

  • @lunacyworks
    @lunacyworks 4 года назад +2

    Also for those who are using this example make sure you have your URL in the browser is pointing to localhost instead of 127.0.0.1 or it will not work.

  • @perronemirko
    @perronemirko 3 года назад

    Thanks for this tutorial, finally some with the right knowledge to explain this concept clearly :D WELL DONE.

  • @KEVIN-nf9oh
    @KEVIN-nf9oh 3 года назад

    Amazing. Completed the videos today and learned a bunch.

  • @MrTubber44
    @MrTubber44 2 года назад

    Lucid explanations, appreciate cha!

  • @ts3798
    @ts3798 2 года назад

    Excellent video, great job man. I'll def check out more of your content.

  • @the_BetaDev
    @the_BetaDev 3 года назад +1

    Instant Subscribe.. Great Video

  • @gabrielburgos2533
    @gabrielburgos2533 2 года назад

    I don't know if you made this for free, but it's fantastic, and the voice is very good.

  • @tomfredericks8834
    @tomfredericks8834 3 года назад

    Excellently done and useful. Thanks.

  • @ezrakeeps
    @ezrakeeps 2 года назад

    Good and helpful content
    Thank you for sharing this knowledge

  • @tabliqatchi6696
    @tabliqatchi6696 Год назад

    I have a note to watchers and a question.
    Note to watchers: Although this is an introductory video and the way the base36 generator is implemented in it is understandable, in real projects never use Math.random() for api keys as it is easily predictable.
    Question: If we give a website an API key, then their frontend developers have to use a proxy server to hide that API key from their users?
    Thanks Steve for this video.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  Год назад +1

      The newer crypto.randomUUID( ) method is a better approach for creating an API key now.
      If you only have one value as the API key then it would be a best practice to use a proxy server and not store the value of the API key in your code on the client-side.

  • @ashutiwari6161
    @ashutiwari6161 4 года назад +2

    I don't even work on express but I still watched it, it was nice. I just have one question, I have noticed that the operators ( => or !==) are being formatted differently in your editor, is this a VSCode update or are you using a plugin. Also can you create a video/ series on Javascript module loaders and bundlers. That would be very helpful.

  • @nicetomeetugaming7024
    @nicetomeetugaming7024 2 года назад

    Thanks for this amazing video sir!

  • @Banjer
    @Banjer 4 года назад

    Thank you very much, this kind of things are really interesting !!!

  • @altonlebronze3536
    @altonlebronze3536 3 года назад +1

    Great content!
    Isn't it possible for both the API key and the host address to be spoofed, especially with programs like cURL that can add header information to HTTP requests.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад +3

      Rule number one in all web development - NEVER trust anything that comes from the client. Validate everything.
      In an introductory tutorial on APIs though we don't delve into server-side security best practices though.
      Bottom line is that the client has to send identifying information to the server. That can be through cookies, POST data, querystrings, or headers. It is up to the server to manage and validate that information.

    • @andressanabria5537
      @andressanabria5537 Год назад +1

      Yes, origin header can be faked easily. So abusers can still stole your client-side api key and abuse it.

  • @geraldomaga
    @geraldomaga 4 года назад +1

    Thanks a lot, master. I wonder if I do exactly the same without express. Is it possible to do that using just
    http module?

  • @duval2262
    @duval2262 3 года назад +1

    Lovely stuff, I like how you compare origins to ensure keys are not abused. I wonder if it will suffice to protect a user's key, how secure would you say this implementation is?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад +2

      This is really just explaining the process. If I were saving a collection of APIs then I would be encrypting and saving those in a database - MongoDB, MySQL, SQL Server, etc.
      The API keys i would not have hard coded in the package.json file. They would be created through the command line or through an interface like the one in Netlify or AWS.
      If I didn't have the host restriction on the API key then I would keep it on the server-side. As the developer using the API key I would store it on my server and make calls to the API server from my own server. The API key would be on my server, not in my client-side code.

    • @duval2262
      @duval2262 3 года назад +1

      @@SteveGriffith-Prof3ssorSt3v3 so basically the host restriction is secure enough for keys to be saved client-side? I really would love an API key implementation that allows my users to save their keys on the client-side giving no mind to the fact that others can see it.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад +1

      @@duval2262 Any time you can hide the key is always better. If you can keep it on the server, that will be more secure.

    • @duval2262
      @duval2262 3 года назад +2

      @@SteveGriffith-Prof3ssorSt3v3 alrighty... Thanks for the awesome video and for responding to my questions.

  • @Senshiii99
    @Senshiii99 4 года назад +1

    Can someone please explain the hostname check part.. I didn't get it 😅 Thank you in advance

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад +4

      If you want to make sure that a specific API key is only being used with a specific domain you can make that a restriction in the way that I showed.

  • @zimani7g473
    @zimani7g473 4 года назад

    Perfect 😍🔥.. Thankssssssssss ♥️

  • @dakshshah5231
    @dakshshah5231 7 месяцев назад

    it is best video on API. but can you tell us how can we setup on our local pc and how can we run server?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  7 месяцев назад

      Setting up your computer depends on what you are trying to do and what technologies you are using. Node, PHP, Ruby, ASP.Net, Docker, Express, React, React Native, Cordova, Flutter, MongoDB, MySQL, etc.
      Then there are cloud systems like Firebase or AWS or Atlas, that you can use for hosting solutions or data.
      I have many videos on many topics and often talk about setting up for that technology

    • @dakshshah5231
      @dakshshah5231 7 месяцев назад

      actually i want to download your code and run in my pc and after i want to convert it according to my needs but i can't run in my pc
      @@SteveGriffith-Prof3ssorSt3v3

  • @kevinrayparas3094
    @kevinrayparas3094 Год назад

    hello steve may i ask? what extension did you used to hover the parameter value on 26:56?

  • @matthewbeardsley7004
    @matthewbeardsley7004 4 года назад

    Thanks, Steve a good overview on the topic, especially loved seeing rate-limiting and restricting to a host. With sites that can only show the API key once, I presume that means that they aren't storing the API key on the server and hence it is more secure if the database is leaked, i.e. i've read about JWT. Is that a completely separate way of doing API authentication or essentially just an add on?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад +1

      If you have one API then you could store it in an ENV variable. If there are thousands - one per user or domain then you would be saving them in a database.
      JWT is a token that is generated on the server and given to the client after they validate themselves with a username and password. The client can then pass the token to the server with subsequent requests as proof that they have validated.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад +1

      Btw, I have a video on JWT coming on Friday

  • @ariasalmeida
    @ariasalmeida 2 года назад

    Thank a lot !!!

  • @triumph881
    @triumph881 3 года назад

    What kind of database do you recommend do use to store and check the keys? I think the db has to be quite fast?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад

      Any database is fine for storing the keys. The network connection is always going to be slower that anything the database does.

  • @happie88
    @happie88 Год назад

    where do you store your Users info and APIKey? in a database table?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  Год назад +1

      Typically yes.

    • @happie88
      @happie88 Год назад

      @@SteveGriffith-Prof3ssorSt3v3 Thank you Steve, what a super helpful video tutorial very information and straight forward.... easy to follow, :)

  • @kuku687
    @kuku687 2 года назад

    its a great knowledge video, but what about the response header on browser, api key showing on browser side in response header.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  2 года назад

      The api key will only show in the Response headers if it is put there by the server-side script.

  • @gowthambhat1498
    @gowthambhat1498 3 года назад

    I'm completely new to the Node js environment and having doubts about which method to use on the client-side, using template engines or the method that you are using?
    Thanks in advance

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад +1

      There is no one answer to this question. Ask a hundred developers and you will get a hundred different opinions.

    • @gowthambhat1498
      @gowthambhat1498 3 года назад

      @@SteveGriffith-Prof3ssorSt3v3 Okay... Thanks for the response..much love

  • @jivanmainali1742
    @jivanmainali1742 4 года назад

    how did you define those api key in package.json and used as process.env.apik_key.never seen before

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад +2

      I'm using npm to run the "dev" script which is setting the ENV variables "API_PORT" and "API_MAX". Then those are available with NodeJS inside of process.env.

  • @alexvass
    @alexvass 2 года назад

    Thanks

    • @alexvass
      @alexvass 2 года назад

      Am I wrong in understanding that the API key is like a password generated by the server, which is given to the client that will need it to make requests in the future by providing it with each call? And that the origin is checked to make sure it is used by the original requester ?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  2 года назад

      @@alexvass yeah that is a simplified way of thinking about it.

  • @kennedydre8074
    @kennedydre8074 2 года назад

    Should the api keys be encrypted to be saved to the database?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  2 года назад

      Usually API keys are saved as Environment Variables on the server.

    • @kennedydre8074
      @kennedydre8074 2 года назад

      @@SteveGriffith-Prof3ssorSt3v3 thank you for your response. So I have to save the api key for every user of my website as an env variable? This doesn’t sound like a workable solution tho. I might be wrong.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  2 года назад

      @@kennedydre8074 Sorry. I was thinking in the context of a single API key being used to request things from another API via the server.
      If you are talking about yourself providing the API keys to validate against all the users coming to your site, then yes, encrypted in the database is the way to go.

  • @NehaKumari-ht2mg
    @NehaKumari-ht2mg Год назад

    How can we create apiKey using nestjs?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  Год назад +1

      If you are talking about creating keys for your clients for your own website then you just need to be able to generate unique strings.
      Nestjs is just Node so you can use a node npm module like uuid or there is now native JS support for crypto.randomUUID. you could use that as your API keys or have your own method like using a hash of identifying information for the user.

  • @thalisonamaral1642
    @thalisonamaral1642 6 месяцев назад

    Does it work If I have a open source API code?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  6 месяцев назад

      Having an api key and how it is set up is entirely under the control of the person building the api. Whether it is open source or not has nothing to do with it.

    • @thalisonamaral1642
      @thalisonamaral1642 6 месяцев назад

      @@SteveGriffith-Prof3ssorSt3v3 Thanks for replying, still I know nothing about it, I just learned how to create a basic api with express.js but once I have it public on github, don't know how to set it properly between being public and having private database access + API Key to allow database read only access

  • @jivanmainali1742
    @jivanmainali1742 4 года назад

    HOW CAN YOU USE ? req.header("x-api-key") .shouldnt it be req.header["x-api-key"]

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад +2

      There is often more than one way to get to things. req.headers['x-api_key']. req.headers.x-api_key. req.header('x-api-key')

  • @karenbenge753
    @karenbenge753 Год назад

    Api key for circle?