Monday, April 24, 2017

Apache User Authentication කරන්නේ කොහොමද?


අපිට apache server එකක හදන directories වලට user based access දෙන්න නම් Apache වලම එන default authentication  පාවිච්චි කරන්න පුළුවන්. අපි බලමු කොහොමද ඒක කරන්නේ කියලා.

අපි කරන්න යන්නේ මෙන්න මේ දේවල් ටික.

  1. Apache document root එකේ තියන directory එකක් (eg. 14000522 directory) username එකක් සහ password එකක් පාවිච්චි කරලා protect කිරීම 
  2. Username password වැරදි හෝ cancel කරන විට custom authentication fail page එකක් display කිරීම 
  3. Specific ip range එකකට විතරක් server එක access කිරීම
  4. VM එකක් (client)  මාර්ගයෙන් අපේ host server එක access කිරීම
මම arch linux පාවිච්චි කරලා තමා මේක කරන්නේ ubuntu වල කරන විදියත් ඒ එක්කම දාන්නම්.(Ubuntu or similar OS වල පාවිච්චි වෙන files සහ directories වලට පොඩ්ඩක් වෙනස්)

***DISCLAIMER: Files වෙනස් කරන්න කලින් ඒවල copy එකක් වෙනම අරන් backup කරලා තිය ගන්න  

Step 00
apache install කිරීම 
Arch Based OS
sudo pacman -S apache
Ubuntu Based OS
sudo apt-get install apache2 apache2-utils

Step 01  
මුලින්ම අපි අපේ server එකේ file structure එක හදාගෙන ඉන්න ඕනි :-D
අපි apache default document root eke,
> 14000522 directory එක හදන්න ඕනි 
> 401.html page එක හදන්න ඕනි 
> 14000522 directory එකේ index.html file එකකුත් හදමු 

arch linux වල /srv/http directory එක තමා apache files දාන්න ඕනි directory එක.
(ubuntu වල  /var/www/html කියල වෙනස් වෙන්න ඕනි පහත commands )

sudo mkdir -p /srv/http/14000522
sudo nano /srv/http/401.html 
<html>
<body>Authentication Fails</body>
</html> 

save කරලා (CTRL+O and then ENTER) 
exit වෙන්න (CTRL+X )
sudo nano /srv/http/14000522/index.html 

<html>
<body>Authentication Success</body>
</html> 

save කරලා (CTRL+O and then ENTER) exit වෙන්න (CTRL+X )

හරි file structure එක සහ files ටික හදල ඉවරයි දැන් ඉතුරු වෙලා තියෙන්නේ username password සෙට් කරලා apache configure කරන්න

Step 02
දැන් බලමු username password සෙට් කරන්නේ කොහොමද කියලා.
sudo htpasswd -c /etc/apache2/.htpasswd prabushitha 
 ඊට පස්සේ password එකක් type කරන්න ඉල්ලයි. password එකක් එතෙන්ට දීල ආයේ confirm කරන්න.
හරි එකේ එච්චරයි!

Step 03
දැන් අපි apache configurations හදන්නේ කොහොමද බලමු!
arch linux පාවිච්චි කරනවා නම්, මුලින්ම main apache conf file එකේ Include conf/extra/httpd-vhosts.conf කියන line එක comment කරලා නම් uncomment කරන්න ඕනි (remove #). අන්තිමේට කොහොම හරි මේ විදියට තියෙන්න ඕනි  

Include conf/extra/httpd-vhosts.conf

(ubuntu වල ඕක කරන්න ඕනි නෑ මන් හිතන්නේ)
  
ඊට පස්සේ virtual host file එක super user mode එකෙන් (sudo) open කරගන්න ඕනි (කැමති text editor එකින් ඔපෙන් කරගන්න). 
arch linux වල නම් /etc/httpd/conf/extra/httpd-vhosts.conf කියන file එක
ubuntu වල නම් /etc/apache2/sites-enabled/000-default.conf කියන file එක
file එකේ කොපියක් backup කරලා තියා ගන්න!!!

උදා . sudo nano /etc/httpd/conf/extra/httpd-vhosts.conf

දැන් මේ විදියට virtual හොස්ට් info ඇතුලත් කරගන්න ඔනි (අවශ්‍යම දේවල් ටික විතරයි මේකේ දාල තියෙන්නේ).  
(රතු පාටින් දාල තියෙන්නේ arch වලට අදාළව ubuntu වල වෙනස් වෙන්න ඕනි තැන්) 

<VirtualHost *:80>
    DocumentRoot "/srv/http"
   <Location />
Order deny,allow
Deny from all
Allow from 192.168.0.0/16
    </Location>
    <Directory "/srv/http/14000522">
AuthType Basic
AuthName "Apache Web Root"
AuthBasicProvider file
AuthUserFile /etc/httpd/conf/passwords
Require valid-user
    </Directory>
    ErrorDocument 401 /401.html
</VirtualHost>

උබුන්ටු වල නම් 
/srv/http කියන එක /var/www/html ලෙසට ද 
/etc/httpd/conf/passwords කියන එක /etc/apache2/.htpasswd ලෙසට ද වෙනස් විය යුතුයි.

Step 04
හරි වැඩේ ඉවරයි! දැන් තියෙන්නේ ටෙස්ට් කරලා බලන්න කරපු ටික වැඩද කියලා :-D 

මුලින්ම apache server එක restart කරන්න.

arch වල මේ command එක ගහල restart කරන්න පුළුවන්  
sudo systemctl restart httpd
ubuntu වල,
sudo service apache2 restart 

දැන් localhost කියල ගැහුවට අපිට server එක access කරන්න බෑ මොකද අපි virtual host configuration වල Allow from 192.168.0.0/16 කියල දුන්න නිසා. request එක එන්න ඕනි 192.168 කියන ip address එකකින්.

දැන් කරන්න තියෙන්නේ මෙච්චරයි,
wifi එකකට connect වෙන්න (data awashya නෑ, phone එකෙන් උනත් නිකන් wifi hotspot එකක් දාල එකෙන් connect වෙන්න පුළුවන්)

terminal එකේ  මේ command එක type කරලා wifi එකට අදාලව අපිට හම්බුනා ip v4 address එක ගන්න
ifconfig | grep inet 

මෙන්න මේ විදියට address එකක් හම්බෙයි 

හදිස්සියෙවත් ip එක 192.168 වලින් පටන් ගන්න එකක් නෙමෙයි නම් බය වෙන්න දෙයක් නෑ, ඔයාට ආපු ip එක virtual host configuration file එකට දාල (Allow from 192.168.0.0/16 කියන කෑල්ල වෙනස් කරන්න ඔයාට අපු ip එක දාල) save කරලා ආයේ apache restart කරන්න.  


Step 05
හරි දැන් අන්තිම එක. virtual box වලින් මොකක් හරි OS එකක් run කරන්න. ඊට පස්සේ එකේ web browser එක open කරලා අපිට ifconfig වලින් අපූ ip එක ගහලා හදපු folder එක access කරන්න බලන්න.  
(මගේ උදාහරණෙට අනුව නම් 192.168.1.5/14000522) 

දැන් username එකයි password එකයි ඉල්ලයි. මුලින්ම ඕක cancel කරලා බලන්න 401.html page එක එතකොට display වෙයි!














හරියට username password දුන්නම 14000522 folder එකේ හදපු index.html page එක display වෙයි.


ඉවරයි!


කරද්දී මොකක් හරි අවුලක් අවොත් comment එකක් දාන්න!  
මේ විදියට අපිට අපේ web application එකේ directories password protected කරගන්න පුළුවන්!

Saturday, April 8, 2017

Angular 2 parent-child අතර data pass කරන්නේ කොහොමද


Angular 2 පාවිච්චි කරලා ලේසියෙන් parent component එකෙන් child component එකට data pass කරගන්නේ කොහොමද කියලා බලමු!

Q. 
මොකද්ද child සහ parent components කියන්නේ?
A. 
X කියලා component එකක්  Y කියන component එක පාවිච්චි කරනවා නම් ඒ අවස්ථාවට අනුව,
  • X = parent component 
  • Y = child component 
උදාහරණයක් විදියට අපි සලකමු Movie කියලා component එකක් තියෙනවා කියලා. ඒ Movie component එකේ Rating කියන component එක use කරලා තියෙනවා. 
Movie = parent component
Rating = child  component 

parent.component.ts



import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  template: '<child-app inputdata="data"> </child-app> '
})

export class ParentComponent {
  public data:string = "Hello!!!";
}


child.component.ts



import { Component, Input } from '@angular/core';

@Component({
  selector: 'child-app',
  template: '<p>{{fromParent}}</p>'
})

export class ChildComponent {
   @Input('inputdata') fromParent:string;
}


ඔය අවස්ථාවේදී output එක විදියට data කියලා print වෙන්නේ. 


parent ගේ data කියන variable එක  ගන්න නම් කරන්න තියෙන්නේ, 

parent.component.ts එකේ <child-app inputdata="data"> කියන එක <child-app [inputdata]="data"> ලෙස වෙනස් කිරීම!

parent.component.ts



import { Component } from '@angular/core';


 @Component({
  selector: 'app-root',
  template: '<child-app [inputdata]="data"> </child-app> '
})

export class ParentComponent {
  public data:string = "Hello!!!";
}



දැන් output එක විදියට  print වෙන්නේ Hello!!!

මේ data pass කරන ඉතාම සරල විදියක්.  Angular 2 data binding වලදීත් මේ concept එකම තමා use වෙන්නේ!